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完成 动画 的 创作 后 ,可 选择 [文件 了 【保存 命令 打开 【另存 为 对 话 框 来 保存 自己 的 作 
品 , 如 图 9. 6 所 示 。 

用 户 可 在 【保存 在 I 下拉 列 表 框 中 选择 要 保存 的 目录 ,在 [文件 名 】 下 拉 列 表 框 中 输入 文 
件 的 名 称 , 完 成 后 单 击 【 保 存 ] 按 钮 即 可 。 








XHSD EE 
MM): rive XO -ay 








图 9.6 【另存 为 ] 对 话 框 


9.1.4 设置 动画 尺寸 和 背景 


动画 的 尺寸 就 是 动画 在 播放 时 画面 的 大 小 。 在 设置 动画 之 前 ,必须 根据 需求 先 设置 动 
画 的 尺寸 。 同 时 还 可 以 设置 动画 的 播放 速度 和 背景 等 属性 。 具 体操 作 步 骤 如 下 。 
(1) 新 建 动画 后 ,选择 [修改 】I【 文 档 ] 命 令 , 打 开 [ 文 档 属性 3 对 话 框 ,如 图 9. 7 所 示 。 








(a); 〇 打印 机 EB) 内容 ( 口 
背 晤 颜色 B)， | ,| 


帧 吕 D，|12 Ips 


标尺 单位 (&)，| 博 过 > 








设 为 默认 什 (m) 
图 9.7 【文档 属性 ] 对 话 框 











(2) 针对 屏幕 阅读 器 ,可 以 在 [标题 ] 和 【描述 文本 框 中 输入 文档 的 名 称 和 描述 信息 ,这 
些 信息 对 于 动画 制作 本 身 没有 直接 影响 , 仅 作为 附加 信息 提供 查看 参考 。 
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在 【 帧 频 】 文 本 框 中 输入 动画 的 帧 率 , 即 动画 的 播放 速度 。 对 于 大 多 数 在 计算 机 上 
播放 的 动画 ,尤其 是 对 于 通过 网 络 传输 的 动画 ,其 速度 取 为 8 帧 / 秒 一 12 帧 / 秒 就 可 
以 了 。 

在 【尺寸 ] 选 项 组 的 [ 宽 了 和 【高 】 文 本 框 中 分 别 输入 动画 显示 画面 的 宽度 和 高 度 , 单 
位 为 像素 。 其 默认 的 设置 为 550 pxX400 px。 

如 果 用 户 需 要 使 舞台 上 对 象 四 周 的 空间 相等 ,可 单 击 【 匹 配 〗 选 项 组 中 的 [内容] 按 
钮 。 若 要 使 动画 尺寸 最 小 ,可 先 将 动画 中 各 元 素 都 向 舞台 左上 角 对 齐 ,然后 单 击 
【内 容 ] 按 钮 。 

要 使 甸 台 具有 最 大 打印 面积 ,可 单 击 [ 打 印 机 按钮 ,该 面积 由 当前 所 设置 的 打印 纸 
大 小 所 决定 。 要 恢复 到 系统 默认 的 舞台 尺寸 , 单 击 【默认 3 按钮 即 可 。 

(7) 要 设置 动画 的 背景 颜色 ,可 单 击 【背景 色 】 颜 色 框 ,在 打开 的 调 色 板 中 选取 所 需 的 
颜色 。 

单 击 [ 标 尺 单位 J 下 拉 列 表 框 旁 的 下 三 角 按钮 ,可 在 打开 的 下 拉 列 表 中 选择 窗口 标 
尺 的 单位 。 

单 击 [ 确 定 ] 按 钮 完成 设置 。 


9.2 绘制 动画 角色 
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Flash 绘制 的 是 矢量 图 形 , 具 有 文件 小 、 响 应 快 .无 限 缩放 等 优点 ,非常 适合 制作 网 页 动 
画 。 而 用 像素 贴图 生成 的 如 GIF 或 JPEG 格式 的 位 图 则 不 具有 这 些 优点 ,所 以 网 页 中 出 现 
了 越 来 越 多 的 Flash 动画 。 本 节 具 体 介 绍 如 何 用 Flash Professional 8 工具 箱 绘制 动画 各 帧 
的 图 形 。 如 图 9. 8 显示 了 Flash Professional 8 工具 箱 中 包含 的 绘图 工具 ,可 以 通过 [窗口 】| 
【工具 命令 将 其 显示 或 隐藏 。 这 些 工具 简单 易 用 .功能 强大 .下 面 分 别 进行 介绍 。 
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图 9.8 绘图 工具 
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9.2.1 绘制 简单 的 几何 图 形 


工具 箱 中 绘制 简单 几何 图 形 的 工具 有 直线 工具 人、 椭圆 工具 名 |\ 和 矩形 工具 局 和 和 多边形 工 
具 台 4 种 ,用 它们 可 以 很 方便 地 画 出 直线 椭圆 ,矩形 和 多 边 形 。 其 中 椭圆 ,矩形 和 多 边 形 可 
以 是 有 轮廓 和 填充 颜色 的 实心 图 形 ,也 可 以 是 只 有 轮廓 的 空心 图 形 ,还 可 以 是 无 轮廓 的 实心 
图 形 。 下 面 分 别 介绍 它们 的 使 用 方法 。 


1. 用 直线 工具 绘制 直线 


用 直线 工具 绘制 直线 的 具体 操作 步骤 如 下 。 
(1) 选择 工具 箱 中 的 直线 工具 好。 
(2) 选择 [窗口 I【 属 性 3I【 属 性 命令 ,打开 [属性 ] 面 板 , 如 图 9. 9 所 示 。 



































TY 民生 溪 柄 | 大 数 二 
/ ?ml |gd————ooo a | We © 
了 泊 朋 提示 缩放 : | 一 慑 。 。” 陪 | 公 角 : 接合 | 人 


图 9.9 直线 [属性 】 面 板 
(3) 设置 笔画 样式 , 单 击 [ 样 式 ] 下 拉 列 表 旁 边 的 三 角 按 钮 回 . 然 后 从 列表 中 选择 一 个 选 
项 。 要 创建 自 定 义 样式 ,可 以 单 击 [ 自 定 义 了 按钮 ,然后 在 【笔触 样式 ] 对 话 框 中 选择 
选项 ,如 图 9. 10 所 示 , 单 击 【 确 定 ] 按 钮 即 可 。 


提示 
选择 非 实心 笔触 样式 会 增加 文件 的 大 小 。 





(4) 设置 笔画 尺寸 。 单 击 【粗细 下拉 列 表 框 旁边 的 下 三 角 按钮 思 . 然 后 将 滑 块 设置 在 
所 需 的 粗细 。 














sg i 


[LY 
粗细 (D: 21.00 六 | pts 
口 党 化 转角 人 GG) 








图 9. 10 【笔触 样式 ] 对 话 框 
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(5) 选中 [笔触 提示 】 复 选 框 ,启用 笔触 提示 。 笔 触 提示 可 在 全 像素 下 调整 直线 锚 记 点 
和 曲线 锚 记 点 ,防止 出 现 模 糊 的 垂直 或 水 平 线 。 
(6) 选择 [端点 选项 , 设 定 路 径 终点 的 样式 ,如 图 9. 11 所 示 。 要 注意 圆 角 和 方 型 端点 样 
会 产生 超出 路 径 半 个 笔触 的 宽度 。 
本 
更 改 开放 或 闭合 路 径 中 的 转角 ,请 选择 一 个 路 径 , 然 后 选择 另 一 个 接合 选项 。 
为 了 避免 尖 角 接合 倾斜 ,应 在 【 尖 角 了 文本 框 中 输入 一 个 尖 角 限制 。 超 过 这 个 值 的 
线条 部 分 将 被 切 成 方形 ,而 不 形成 尖 角 。 例 如 ,如 果 一 个 3 磅 笔触 的 尖 角 限制 为 2， 
则 该 点 长 度 是 该 笔触 粗细 的 两 售 时 ,Flash 就 删除 限制 点 ,如 图 9. 12 所 示 。 





Oo 


EA 


um a 
加 相 二 > = 
图 9.11 端点 样式 效果 比较 图 9.12 设置 接合 点 尖 角 大 小 





4 完毕 ,在 舞台 窗口 上 拖 动 鼠标 指针 , 即 可 绘制 直线 。 绘 制 时 可 选择 [窗口 】| 
息 3 命 令 , 打 开 [ 信 息 ] 面 板 , 如 图 9. 13 所 示 。 通 过 该 面板 可 确定 直线 的 起 点 坐 








直线 的 起 点 坐标 值 





9.13 【信息 面板 


2. 用 和 矩 形 工具 绘制 矩 形 


用 拢 形 工具 绘制 矩形 的 具体 操作 步骤 如 下 。 
(1) 选择 工具 箱 中 的 矩形 工具 也 。 
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(2) 选择 [窗口 |【 属 性] 命令 ,打开 [属性] 面板 ,如 图 9. 14 所 示 。 









































| 尾 人 性 ， 源 统 | 参数 3 
口 和 7 加 21 | 一 一 一 一 一 [六 .第 后 @ 
二 专 国 | 回 笔 由 提 示 缩放 水平 。” 赔 | 尖 和 ”| 接合 全 


图 9.14 矩形 [属性 】 面 板 


(3) 在 【属性 了 面板 中 设置 轮廓 线 笔画 的 样式 .尺寸 和 颜色 ,操作 方法 与 绘制 直线 一 样 。 

(4) 在 [属性 ] 面 板 中 单 击 [填充 ] 按 钮 访 右 侧 的 颜色 框 按钮 ,设置 填充 颜色 。 

(5) 选择 矩形 工具 后 ,在 工具 箱 中 会 显示 如 图 9. 15 所 示 的 【选项 选项 组 。 单 击 上 面 的 
【 圆 角 抵 形 半径 了 按钮 介 ,弹出 【矩形 设置 3 对话 框 .如 图 9. 16 所 示 ,在 【 边 角 半 径 】 文 
本 框 中 输入 想 要 的 矩形 圆 角 半径 值 。 


选项 
回 | 册 | 
圆 角 和 矩形 半径 一 一 人 








图 9.15 【选项 ] 选 项 组 图 9.16 【和 矩 形 设置 ] 对 话 框 


(6) 如 果 要 绘制 对 象 , 可 以 在 工具 箱 中 单 击 【 对 象 绘制 3 按钮 可 ,图 形 和 对 象 的 区 别 如 
图 9. 17 所 示 。 





图 9.17 对 象 和 图 形 的 区 分 
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(7) 在 舞台 窗口 上 拖 动 鼠标 指针 , 即 可 绘制 矩形 。 同 样 可 通过 【信息 面板 确定 绘制 矩 
用 椭圆 工具 绘制 椭圆 的 操作 方法 与 用 和 矩形 工具 绘制 矩形 的 操作 方法 基本 相同 。 但 绘制 
椭圆 不 用 设置 圆 角 , 即 绘制 椭圆 的 操作 步骤 中 不 会 出 现 绘制 矩形 的 操作 步 又 (5)。 





提示 
画 直 线 时 按 住 Shift 键 ,可 沿 45" 角 的 倍数 方向 画 直 线 ; 画 椭圆 或 矩形 时 按 住 Shift 键 ， 
可 画 出 圆 形 或 正方 形 。 


注意 
利用 [属性 面板 可 设置 笔画 和 填充 功能 。 用 户 还 可 以 利用 [颜色 选项 组 设置 笔画 和 
填充 的 颜色 ,如 图 9. 18 所 示 。 用 户 在 操作 过 程 中 可 以 根据 实际 情况 灵活 运用 各 种 设置 


颜色 
A 设置 笔画 颜色 
设置 填充 颜色 一 他 上 
| 
| | 


默认 颜色 禁止 填充 切换 笔画 和 填充 色 
图 9.18 【颜色 ] 选 项 组 





3. 用 多 边 形 工 具 绘 制 多 边 形 


和 和 撼 形 工具 绘制 矩形 的 具体 操作 步骤 相同 工 属性】 面板 的 属性 设置 也 基本 相同 , 如 
图 9.19 所 示 。 不 过 多 边 形 工具 属性 中 多 了 一 个 【选项 3 按钮 ,如 图 9. 19 所 示 。 





二 有 
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图 9.19 多 边 形 [ 属 性 】 面板 


(0 2 























单 击 【选项 按钮 ,打开 【工具 设置 ] 对 话 框 ,如 图 9. 20 所 示 。 在 该 对 话 框 中 可 以 设置 多 边 
形 的 样式 、 边 数 和 星 形 定点 大 小 。 
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图 9.20 【工具 设置 ] 对 话 框 


9.2.2 建立 路 径 


用 钢笔 工具 人 建立 路 径 是 Flash Professional 8 绘制 矢量 图 形 的 主要 功能 之 一 。 如 果 用 
过 Photoshop ,对 路 径 这 个 概念 就 应 该 非常 熟悉 了 。 路 径 是 指 用 户 绘制 的 \ 由 一 系列 点 连接 
起 来 的 线段 或 曲线 。 可 以 沿 着 这 些 线段 或 曲线 填充 颜色 ,或 者 设置 笔画 ,从 而 绘制 图 像 。 事 
实 上 路 径 是 一 些 撩 量 线条 ,因此 缩放 图 像 , 不 会 影响 其 分 辨 率 和 平滑 度 。 下 面 介绍 在 Flash 
Professional 8 中 如 何 用 钢笔 工具 建立 路 径 。 具 体操 作 步 骤 如 下 。 
(1) 在 工具 箱 中 选择 钢笔 工具 血 |, 然 后 移动 鼠标 指针 到 舞台 窗口 中 , 单 击 可 以 制作 出 路 
径 的 开始 点 , 即 第 1 个 节点 ,如 图 9. 21 所 示 。 
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图 9.21 用 钢笔 工具 在 舞台 窗口 中 绘制 路 径 的 起 点 


(2) 将 鼠标 指针 移动 到 要 建立 第 2 个 节点 的 位 置 上 单 击 , 就 会 自动 出 现 连接 第 2 个 节点 
与 开始 节点 的 线段 ,再 将 鼠标 指针 移 到 第 3 个 节点 位 置 上 单 击 , 即 绘制 了 第 3 个 节 
点 ,如 图 9. 22 所 示 。 

(3) 按 步骤 (2) 中 的 方法 ,绘制 其 他 节点 。 如 果 最 后 再 单 击 路 径 的 起 点 (第 1 个 节点 ), 就 


@: 


可 以 制作 一 个 封闭 的 路 径 。 此 时 ,在 鼠标 指针 下 方 就 会 出 现 一 个 小 圆圈 ,表示 单 击 
将 终点 与 起 点 相连 。 单 击 之 后 ,鼠标 指针 下 方 就 会 出 现 一 个 减 号 ,如 图 9. 23 所 示 ， 
单 击 鼠 标 可 以 删除 该 点 节点 。 


FA 


图 9.22 绘制 路 径 中 的 节点 图 9.23 绘制 封闭 路 径 





ewe 工具 除了 可 以 绘制 直线 路 径 以 外 ,还 可 以 绘制 曲线 路 径 , 但 操作 方法 有 所 不 
绘制 以 一 个 心 形 图 案 为 例 来 说 明 绘 制 曲线 路 径 的 操作 步骤 。 

(1) ee 了 便于 构图 ,可 以 选择 [视图 了 区 标 尺 ] 命 令 ,在 编辑 窗口 中 显示 标尺 ,然后 用 鼠标 

在 左 侧 和 顶部 的 标尺 中 拖 出 辅助 线 , 在 编辑 窗口 中 设计 好 心 形 图 案 的 范围 和 主要 

交叉 点 ,如 图 9. 24 所 示 。 

在 工具 箱 中 选择 钢笔 工具 一 |, 然 后 移动 鼠标 指针 至 舞台 窗口 中 , 单 击 制作 出 路 径 的 

开始 点 , 即 路 径 的 第 1 个 节点 。 

移动 鼠标 指针 到 图 像 的 第 2 个 节点 处 单 击 并 拖 动 ,此 时 绘制 出 如 图 9. 23 所 示 的 曲 

线 。 用 钢笔 工具 拖 忠 节点 时 ,会 产生 一 个 控制 柄 ,控制 柄 两 端的 点 为 控制 点 。 拖 中 

这 两 个 控制 点 即 可 改变 控制 柄 的 长 度 和 位 置 ,同时 也 就 改变 了 曲线 的 形状 和 平滑 

程度 。 

重复 操作 ,最 后 将 鼠标 指针 移 到 开始 点 上 单 击 , 封 闭路 径 , 就 绘制 好 了 心 形 图 案 的 

基本 轮廓 ,如 图 9. 25 所 示 。 
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于 | 1. 选 择 钢笔 工具 


,| 2. 设 置 绘制 线条 的 粗细 和 颜色 
3. 双 击 打开 【 图 层 属性 】 对 话 
框 中 设置 路 径 和 控制 柄 的 颜 
色 , 便于 区 分 辅助 线 和 路 径 
4 放大 视图 显示 , 便于 观察 和 操作 
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.| 7 在 单 击 第 2 个 点 时 , 按 住 鼠标 
一 人 拉 出 一 条 控 





图 9.24 绘制 曲线 路 径 
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| 新 编 网 页 制作 入 门 与 提高 


(5) 下 面 用 钢笔 工具 、 部 分 选取 工具 和 选择 工具 来 调整 路 径 的 形状 。 隐 藏 辅助 线 , 避 人 免 
辅助 线 的 紧 贴 功能 影响 钢笔 操作 。 把 钢笔 工具 移动 到 上 面 节点 上 , 当 光 标 变 成 旬 
形状 时 , 单 击 即 可 把 该 节点 变 成 角 点 ,此 时 的 心 形变 成 如 图 9. 26 所 示 形 状 。 再 把 光 
标 置 于 该 点 上 面 就 会 变 成 & 形状 ,此 时 单 击 鼠 标 会 删除 该 节点 。 








ssso=vozo 
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图 9.25 封闭 曲线 路 径 图 9.26 转换 为 角 点 


(6) 然后 用 部 分 选取 工具 调整 左右 两 边 的 控制 柄 ,借助 辅助 线 使 左右 控制 柄 对 称 显示 ， 
如 图 9. 27 所 示 。 
(7) 最 后 用 选择 工具 修整 路 径 的 形状 。 在 工具 箱 中 选取 选择 工具 ,然后 把 光标 靠近 
路 径 , 当 光标 变 成 NV 形状 , 轻 轻 拖 动 路 径 , 改 善心 形 的 形状 ,最 后 修改 的 心 形 如 
图 9. 28 所 示 。 
路 径 绘制 完成 后 ,用 户 可 以 对 它 进 行 填充 或 设置 笔画 等 ,其 操作 方法 与 对 几何 图 形 填 充 
和 设置 笔画 的 操作 方法 一 样 。 由 上 例 可 知 ,用 钢笔 工具 绘制 路 径 可 以 按 自己 的 想法 制作 各 
种 各 样 复杂 的 图 形 ,并 能 对 其 进行 调整 ,达到 想 要 的 效果 。 
提示 
用 户 可 以 直接 使 用 工具 箱 中 的 辅助 选择 工具 , 拖 动 两 节点 间 的 曲线 段 来 调整 曲线 的 
形状 。 或 者 在 选中 节点 后 ,用 键盘 上 的 方向 键 进行 细微 的 移动 调整 。 
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图 9.28 选择 工具 修整 形状 








| 捉 示 站 和 半生 
若 按 下 Shift 键 ,然后 用 辅助 选择 工具 单 击 各 个 节点 , 则 可 同时 选中 多 个 节点 。 藻 
按 下 Shift 键 的 同时 单 击 各 路 径 , 则 只 会 选中 各 路 径 , 而 不 会 同时 选中 各 路 径 中 的 节点 。 


9.2.3 绘制 线条 


Flash Professional 8 中 绘制 线条 的 工具 主要 有 铅笔 工具 和 画笔 工具 。 铅 笔 工 具 常 用 来 
画 一 些 棱角 突出 的 线条 ,如 同 平常 使 用 铅笔 绘制 的 图 形 ; 利 用 画笔 工具 可 以 绘制 出 比较 柔和 
的 效果 ,就 像 用 毛笔 画 出 的 效果 一 样 。 
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1. 铅笔 工具 
用 铅笔 工具 三 可 绘制 线条 和 几何 图 形 。 画 完 线条 后 ,Flash Professional 8 自动 使 之 变 平 
滑 或 笔直 ,平滑 和 笔直 的 程度 取决 于 所 选择 的 绘制 方式 。Flash Professional 8 还 会 将 线条 的 
尖 角 分 段 。 具 体操 作 步骤 如 下 。 
(1) 在 工具 箱 中 选择 铅笔 工具 。 
(2) 在 【属性 了 面板 中 设置 所 绘 线条 的 笔画 、 线 宽 和 颜色 。 
(3) 在 【选项 选项 组 中 单 击 图 标 所 ,从 弹出 的 选项 菜单 中 选择 一 种 铅笔 模式 ,如 图 9. 29 
所 示 。 
图 9.29 选择 一 种 铅笔 模式 
这 3 种 铅笔 模式 的 含义 如 下 。 
@ 伸 直 模式 : 画 出 的 线条 会 自动 拉 直 .并 且 画 封闭 图 形 时 ,会 模拟 三 角形 .矩形 、 
圆 .椭圆 以 及 正方 形 等 规则 的 几何 图 形 。 s 
@ 平滑 模式 : 画 出 的 线条 会 自动 光滑 , 变 成 平滑 的 模式 。 @ 
@ 墨水 模式 : 画 出 的 线条 比较 接近 于 原始 的 图 形 。 
(4) 在 舞台 窗口 上 拖 动 鼠标 指针 开始 画图 .同样 可 通过 【信息 了 面板 确定 起 点 。 
zs 
(cx 
人 225 





绘制 时 按 住 Shift 键 ,可 画 出 水 平 或 垂直 线条 。 


2. 画笔 工具 


画笔 工具 殉 可 画 出 类 似 用 毛笔 作画 的 效果 。 利 用 画笔 工具 可 创建 许多 特殊 的 效果 ,如 
书法 效果 ,还 可 以 对 导入 的 位 图 图 像 着 色 。 使 用 画笔 工具 的 操作 步骤 如 下 。 
(1) 在 工具 箱 中 选择 画笔 工具 ,出 现 画 笔 的 [选项 选项 组 ,如 图 9. 30 所 示 。 
(2) 单 击 画 笔 模 式 图 标 图. 从 弹出 的 选项 菜单 中 选择 一 种 画笔 模式 ,如 图 9. 31 所 示 。 
画笔 模式 选项 菜单 中 各 个 选项 的 含义 如 下 。 
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图 9.30 画笔 工具 的 选项 组 





标准 绘画 模式 :在 原始 图 形 的 同一 层 上 绘图 ,将 覆盖 掉 原 图 的 线条 和 填充 色 。 
颜料 填充 模式 :在 原始 图 形 上 及 其 外 部 绘图 ,覆盖 掉 原 图 的 填充 色 , 但 保留 线条 
不 变 。 

后 面 绘画 模式 ;在 原始 图 形 的 外 部 绘图 ,就 像 在 原 图 的 底层 绘图 一 样 ,不 影响 原 
图 的 线条 和 填充 颜色 。 

颜料 选择 模式 :在 选区 内 绘图 。 

内 部 绘画 模式 :在 原始 图 形 内 部 绘图 。 覆 盖 掉 原 图 的 填充 色 , 但 保留 线条 不 变 。 
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图 9.31 画笔 模式 选项 菜单 


(3) 打开 画笔 尺寸 下 拉 列 表 , 从 中 选择 一 种 画笔 尺寸 。 
(4) 在 笔画 下 拉 列 表 中 选择 一 种 笔画 。 

(5) 在 【属性 了 面板 中 设置 所 绘 线条 的 颜色 。 

(6) 在 舞台 窗口 上 拖 动 鼠标 指针 ,就 可 以 绘制 线条 了 。 


9.2.4 选取 和 填充 颜色 


填充 是 指 对 几何 图 形 填 充 某 种 颜色 ,而 绘制 笔画 是 指 用 某 种 颜色 描绘 几何 图 形 的 轮廓 。 


使 用 油漆 桶 工具 可 以 填充 几何 图 形 ; 使 用 墨水 瓶 工 具 可 以 绘制 线条 和 几何 图 形 轮廓 的 笔画 ; 
而 吸管 工具 可 以 用 来 采集 填充 和 笔画 的 颜色 属性 ,然后 就 可 通过 油漆 桶 工具 或 墨水 瓶 工具 
将 其 应 用 到 其 他 图 形 上 去 。 


1. 墨水 瓶 工具 

墨水 瓶 工 具 钨 可 以 用 实 色 绘制 线条 和 几何 图 形 的 笔画 ,而 不 能 使 用 渐变 色 或 位 图 图 形 。 
利用 墨水 瓶 工 具 可 以 设置 线条 的 颜色 \ 线 宽 和 笔画 等 属性 ,其 操作 步骤 如 下 。 

(1) 从 工具 箱 中 选择 墨水 瓶 工 具 钨 |。 


(2) 在 [属性] 面板 中 选择 线条 颜色 笔画 和 线 宽 。 
(3) 单 击 舞 台 窗口 上 已 有 的 线条 或 填充 图 形 ,改变 线条 的 属性 或 为 填充 图 形 添加 轮廓。 


2. 油漆 桶 工具 


油漆 桶 工具 刚 用 于 给 封闭 区 域 填 充 颜色 , 既 可 以 为 空白 区 域 填 色 , 还 可 以 改变 该 区 域 已 
有 的 颜色 。 用 油漆 桶 工具 可 以 对 图 形 填充 实 色 、 渐 变色 或 位 图 图 像 ,还 能 调整 渐变 色 填 充 和 
位 图 填充 的 大 小 、 方 向 及 着 色 中 心 。 使 用 油漆 桶 工具 的 操作 如 下 。 

(1) 从 工具 箱 中 选择 油漆 桶 工具 网, 显示 油漆 桶 工具 的 [选项 选项 组 ,如 图 9. 32 所 示 。 

(2) 在 [属性 ] 面 板 中 选择 一 种 填充 模式 和 填充 颜色 。 

(3) 单 击 [ 选 项 ] 选 项 组 中 国 的 图 标 ,从 弹出 的 选项 菜单 中 选择 一 种 填充 方式 ,如 图 9. 33 
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图 9.32 油漆 桶 工具 的 选项 组 图 9.33 缺口 尺寸 选项 菜单 


选项 菜单 中 4 个 选项 的 含义 如 下 。 

e@ 不 封闭 空隙 :所 填充 的 区 域 必须 是 封闭 区 域 , 否 则 只 能 由 用 户 先 密封 缺口 ,再 进 
行 填充 。 

@ 封闭 小 空隙 :如 果 缺 口 较 小 , 则 填充 时 Flash Professional 8 自动 封闭 缺口 ;如 果 
缺口 较 大 , 则 不 能 进行 填充 。 

e@ 封闭 中 等 空隙 :可 以 对 有 中 等 缺口 的 区 域 进 行 填 充 , 并 自动 封闭 缺口 。 


oe 
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@ 封闭 大 空隙 :可 以 对 有 较 大 缺口 的 区 域 进行 填 充 , 并 自动 封闭 缺口 。 
(4) 单 击 舞 台 窗 口上 待 填 充 的 图 形 或 区 域 , 进 行 填充 。 

如 果 缺 口 尺 寸 太 大 ,那么 无 论 选 择 哪 种 填充 方式 ,都 不 能 进行 填充 。 缩 放 图 形 可 以 改 
变 显 示 的 缺口 大 小 ,但 不 能 更 改 缺口 的 实际 大 小 。 





3. 吸管 工具 


利用 吸管 工具 到 可 以 将 图 形 的 填充 颜色 或 线条 的 属性 复制 到 其 他 图 形 或 线条 上 ,还 可 
以 采集 位 图 图 形 作为 填充 内 容 。 当 用 吸管 工具 单 击 线条 ,以 采集 线条 的 属性 时 ,吸管 工具 自 
动 切换 为 墨水 瓶 工具 ;而 当 用 吸管 工具 单 击 填充 内 容 时 ,会 自动 切换 为 油漆 桶 工具 。 其 操作 
如 下 。 
(1) 选择 工具 箱 中 的 吸管 工具 列 , 单 击 舞台 窗口 上 的 线条 或 填充 图 形 。 此 时 吸管 采集 
到 的 线条 属性 将 自动 保存 到 墨水 瓶 工具 中 ,而 采集 到 的 填充 属性 将 保存 到 油漆 桶 
工具 中 ,并 且 吸 管 工具 自动 切换 为 墨水 瓶 或 油漆 桶 工具 ,此 时 锁定 填充 按钮 处 于 打 
开 状 态 。 
(2) 单 击 舞台 窗口 上 的 其 他 线条 或 填充 图 形 , 就 将 采集 的 属性 自动 应 用 到 线条 或 填充 
图 形 上 。 


9.3 编辑 角色 


Flash Professional 8 中 有 3 类 图 形 角色 :图 形 (Shape)、 群 组 (Group) 和 元 件 实例 (In- 
stance) ,此 外 还 有 一 类 特殊 的 角色 ,如 文字 (Text) 。 
@ 图 形 (Shape) :是 用 绘图 工具 直接 绘制 而 成 的 线条 和 填充 形状 ,也 可 以 是 由 导入 位 图 
分 离 而 成 的 颜色 块 , 还 可 以 是 对 位 图 描 图 生成 的 矢量 图 。 对 图 形 可 直接 进行 整形 。 
@ 群 组 (Group) :是 将 几 个 分 离 图 形 通 过 选择 [修改 】| 【组 合 ] 命 令 后 生成 的 图 形 对 象 ， 
直接 导入 的 矢量 图 也 是 一 个 群 组 。 对 群 组 选择 【修改 】| 【取消 组 合 ] 命 令 , 就 可 将 其 
分 解 为 可 整形 的 分 离 图 形 。 
e ”元件 实例 (Instance) :是 直接 从 [ 库 3 面 板 中 拖 出 ,或 是 对 舞台 窗口 选中 的 分 离 图 形 或 
群 组 选择 [修改 YI【 转 换 为 元 件 ] 命 令 后 所 生成 的 图 形 。 只 有 使 用 [修改 】I【 分 离 ] 命 
令 将 元 件 实 例 分 解 成 分 离 图 形 后 ,才能 对 其 进行 整形 。 
e 文字 (Text) :是 用 文字 工具 直接 创建 出 来 的 对 象 。 对 文字 不 能 直接 进行 整形 ,只 有 
选择 [修改 了 (分 离 ] 命 令 分 解 成 分 离 图 形 后 ,才能 进行 整形 。 
在 Flash Professional 8 中 ,可 以 方便 地 对 角色 执行 各 类 编辑 操作 ,包括 选取 .复制 、 删 
除 、 氛 除 和 自动 捕捉 等 。 这 些 操 作 , 有 助 于 制作 生动 逼真 的 动画 。 





9.3.1 选取 角色 


工具 箱 中 的 选取 工具 和 和 套 索 工具 史 是 Flash Professional 8 中 主要 的 选取 工具 ,但 它 
们 之 间 有 很 大 的 区 别 。 而 利用 自由 变形 工具 型 则 可 以 对 选取 的 对 象 进行 变形 。 下 面 分 别 介 
绍 它们 的 操作 方法 。 


1. 选 取 工 具 


用 选取 工具 和 可 以 很 方便 地 选择 整个 角色 或 角色 的 某 一 部 分 。 当 选取 的 角色 是 分 离 图 
形 时 ,用 选取 工具 单 击 可 以 选取 其 上 的 部 分 线条 或 所 有 填充 颜色 块 ;双击 填充 颜色 可 选取 填 
充 颜 色 块 及 其 轮廓 ;双击 线条 可 选取 角色 的 所 有 线条 。 当 选取 的 角色 为 群 组 或 元 件 实例 时 ， 
单 击 即 可 选取 整个 角色 。 也 可 用 选取 工具 拖 出 一 个 矩形 区 域 ,将 整个 角色 选择 在 内 。 如 果 
要 用 选取 工具 选取 角色 的 某 一 部 分 , 则 该 角色 必须 是 分 离 图 形 ; 如 果 是 群 组 ,元件 实 例 或 文 
字 , 则 它们 必须 完全 位 于 选 框 中 才能 被 全 部 选取 。 

单 击 选取 工具 后 ,会 弹出 选取 工具 的 【选项 选项 组 ,如 图 9. 34 所 示 。 各 种 工具 的 含义 
如 下 。 

e 平滑 工具 区 :使 所 选 线条 或 图 形 轮廓 变 圆滑 。 

ee 拉 直 工具 *(: 使 所 选 线条 或 图 形 轮 廓 变 平 直 。 





图 9.34 选取 工具 的 选项 组 


利用 平滑 和 拉 直 工具 可 以 对 线段 进行 平滑 和 拉 直 处 理 。 具 体操 作 如 下 。 

(1) 选取 需要 处 理 的 线段 或 图 形 。 

(2) 单 击 选取 工具 ,打开 【选项 ] 选 项 组 。 

(3) 单 击 [选项 选项 组 中 的 一 种 工具 , 即 可 对 图 形 进行 处 理 。 

(4) 连续 单 击 , 可 以 进行 重复 处 理 ,直到 满意 为 止 。 图 9. 35 即 显 示 了 对 曲线 进行 平滑 和 
拉 直 前 后 的 效果 。(a) 图 为 原始 图 形 ,而 (b) 图 和 (c) 图 分 别 为 平滑 和 拉 直 后 的 效果 。 
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(a) 原 图 形 (b) 反 复 平滑 处 理 (中 反复 拉 直 处 理 
图 9.35 用 选取 工具 处 理 图 形 


利用 选取 工具 还 可 以 对 图 形 进行 整形 处 理 。 整 形 必 须发 生 在 图 形 的 非 选中 状态 下 ,其 
操作 步骤 如 下 。 

(1) 选取 工具 箱 中 的 选取 工具 。 

(2) 将 鼠标 指针 顺 着 舞台 窗口 上 要 整形 的 图 形 的 轮廓 移动 , 当 鼠 标 指针 的 形状 由 kr: 形 

状 变 为 其 他 形状 时 ,就 可 拖 动 鼠标 进行 整形 。 

为 线条 整形 ,就 像 是 为 线条 上 的 一 个 流动 的 点 确定 位 置 ,鼠标 指针 移动 哪儿 ,点 也 跟 到 
哪儿 。 如 果 这 个 点 是 线条 的 一 个 端点 ,就 可 以 拉 伸 或 缩短 线条 ;如 果 是 一 个 节点 ( 非 光滑 连 
续 点 ,而 是 尖锐 的 点 ), 则 点 的 两 边 在 被 拉 伸 或 缩短 时 仍 保持 平 直 。 鼠 标 指针 箭头 旁边 的 方 
框 变 为 直角 时 ,表示 可 对 节点 进行 编辑 ; 当 方 框 变 为 弧 线 时 ,表示 可 对 此 有 段 实 行 曲 线 变 形 。 


2. 自由 变形 工具 


用 选取 工具 选取 了 对 象 之 后 ,可 以 利用 自由 变形 工具 型 对 角色 进行 变形 操作 。 变 形 的 


操作 步骤 如 下 。 
(1) 单 击 工具 箱 中 的 自由 变形 工具 ,弹出 自由 变形 工具 的 [选项 ] 选 项 组 ,如 图 9. 36 
所 示 。 
选项 
捕捉 工具 一 -| 网] 
族 转 与 倾斜 工具 一 击 缩放 工具 
扭曲 工具 一 一 7 封套 工具 


图 9.36 自由 变形 工具 的 选项 组 
(2) 选取 需要 变形 的 图 形 。 
(3) 从 【选项 选项 组 中 选择 一 种 变形 工具 ,对 图 形 进行 变形 操作 。 各 种 工具 的 含义 
如 下 。 
e@ 旋转 和 倾斜 工具 启 j: 拖 动 图 形 外 框 上 的 控制 柄 ,可 以 使 图 形 旋转 或 倾斜 。 


e 缩放 工具 时 : 拖 动 图 形 外 框 上 的 控制 柄 ,可 以 改变 图 形 的 尺寸 大 小 。 
e@ 扭曲 工具 轰 ; 拖 动 图 形 外 框 上 的 控制 柄 ,可 以 任意 对 图 形 进 行 扭曲 。 
e 封套 工具 镶 : 拖 动 图 形 外 框 上 的 控制 柄 ,可 以 任意 对 图 形 的 局 部 进行 扭 由 和 
旋转 。 
3. 套 索 工具 
套 索 工具 只 是 通过 勾画 任意 形状 的 范围 来 选取 不 规则 的 形状 。 通 常 ,如 果 选 取 的 角色 
是 群 组 .元 件 实例 或 文字 , 则 只 有 当 角 色 完 全 位 于 选取 范围 内 才能 被 选取 ;如 果 要 选取 分 离 
图 形 的 某 一 部 分 ,可 用 套 索 工具 圈 出 选取 范围 进行 选取 。 
单 击 工具 箱 中 的 套 索 工具 ,弹出 套 索 工具 的 [选项] 选项 组 ,如 图 9. 37 所 示 。 


“这 大 
魔术 棒 一 一 SN SN -| 魔术 棱 属性 设置 
多 形 套 案 工具 一 一 办 


图 9.37 套 索 工具 的 选项 组 


各 类 选取 工具 的 含义 如 下 。 
。 套 索 工具 图 :选中 该 工具 后 在 舞台 窗口 上 拖 动 鼠 标 指针 ,自由 手绘 出 选区 边界 ,释放 
鼠标 后 结束 选择 。 
@ 多边形 套 索 工具 图 :可 在 舞台 窗口 上 圈 选 出 多 边 形 选区 ,双击 即 可 结束 选择 。 
e 魔术 棱 工 具 国 :可 在 分 离 位 图 上 选取 色 块 。 其 具体 操作 步骤 如 下 。 
Q@ 选取 场景 中 的 位 图 .然后 选择 [修改 】I【 分 离 ] 命 令 , 将 位 图 分 离 。 
@ 选择 工具 箱 中 的 套 索 工具 ,弹出 套 索 工具 的 [选项 ] 选 项 组 ,并 选中 魔术 棒 工 具 。 
@ 单 击 【选项 ] 选 项 组 中 的 [魔术 棱 属 性 设置 3 按钮 图 ,弹出 [魔术 棒 设 置 ] 对 话 框 ,如 
图 9. 38 所 示 。 
@@【 闵 值 ] 文 本 框 用 于 设置 选取 范围 内 邻近 像素 颜色 值 的 相近 程度 。 阅 值 越 大 , 选 
取 范 围 就 越 大 ;如 果 输 入 “0”, 则 表示 选取 范围 是 那些 颜色 与 单 击 处 的 颜色 完全 
相同 的 区 域 . 【平滑 ] 下 拉 列 表 框 用 于 设置 选取 边缘 的 平滑 程度 。 











图 9.38 【魔术 棒 设 置 ] 对 话 框 
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@@ 在 位 图 上 的 任意 处 单 击 ,就 会 选取 与 单 击 处 颜色 相近 的 区 域 。 
在 使 用 套 索 工具 国 进 行 手绘 选取 时 , 按 住 Alt 键 , 即 可 切换 为 多 边 形 套 索 工 具 员 进行 
多 边 形 选取 。 


9.3.2 复制 和 删除 


在 Flash Professional 8 中 进行 复制 和 删除 操作 与 其 他 应 用 程序 中 的 复制 和 删除 操作 非 
常 相似 ,也 是 先 选 取 要 编辑 的 内 容 , 然 后 再 执行 相应 的 操作 命令 。 具 体操 作 步骤 如 下 。 

(1) 用 选取 工具 或 套 索 工 具 选 择 角色 或 角色 的 某 一 部 分 。 

(2) 选择 [编辑 】| 【复制 ] 命 令 , 即 可 复制 所 选取 的 部 分 ;选择 [编辑 】| 【清除 命令, 即 
可 删除 所 选取 的 部 分 ,也 可 直接 按 下 Delete 键 将 其 删除 。 

(3) 复制 所 选 部 分 后 ,可 以 在 当前 舞台 窗口 上 ,也 可 以 选取 另 一 个 层 ,场景 或 文件 ,然后 
执行 下 面 的 一 种 操作 :选择 [编辑 】|【 粘 贴 ] 命 令 , 可 将 复制 的 内 容 粘 贴 到 舞台 窗口 
的 中 心 位 置 ,然后 就 可 用 选取 工具 将 其 拖 动 到 想 要 的 位 置 ;选择 [编辑 】| 【当前 位 置 
粘贴 3 命令 ,可 将 复制 的 内 容 粘贴 到 与 复制 位 置 相同 的 位 置 。 


9.3.3 擦 除 角色 


利用 工具 箱 中 的 橡皮 擦 工具 可 以 迅速 擦 除 分 离 图 形 或 其 上 的 某 一 部 分 ,并 且 可 以 设置 
是 删除 颜色 还 是 线条 ,或 是 擦 掉 某 块 区 域 的 内 容 , 还 可 以 定义 橡皮 擦 的 形状 和 大 小 ,以 方便 
操作 。 其 操作 步骤 如 下 。 
(1) 选择 工具 箱 中 的 橡皮 擦 工具 圆 ,弹出 橡皮 擦 工具 的 【选项 3 选项 组 ,如 图 9. 39 所 示 。 
(2) 单 击 [ 选 项 〗 选 项 组 中 的 橡皮 擦 模式 按钮 图 ,从 弹出 的 选项 菜单 中 选择 一 种 擦 除 模 
式 , 如 图 9. 40 所 示 。 选 项 菜单 中 列 出 的 各 种 控 除 模式 的 含义 如 下 。 
e 标准 擦 除 : 可 擦 除 同一 层 上 的 线条 和 颜色 。 
擦 除 填 色 :只 擦 除 填 充 颜 色 , 不 擦 除 线条 。 
擦 除 线条 :只 擦 除 线条 ,不 擦 除 填充 颜色 。 
擦 除 所 选 填充 :只 擦 除 当 前 选取 的 填充 颜色 。 
内 部 擦 除 :只 擦 除 与 拖 动 鼠 标 指针 的 起 点 区 域 填充 颜色 相同 的 鼠标 指针 经 过 区 
域 的 填充 颜色 ,而 不 会 擦 除 线条 。 如 果 从 一 个 空白 区 域 开始 拖 动 鼠 标 指针 , 则 
什么 也 不 会 擦 除 。 


运 项 合 | 标 闪 皖 除 
探 除 模式 一 -十 水 龙头 自 党 除 培 色 
© 全 过 了 线条 

橡皮 擦 型 号 筷 坊 队 所 运 十 充 
自 内 部 按 除 

图 9.39 【选项 】 选 项 组 图 9.40 橡皮 擦 模式 


(3) 从 橡皮 擦 型 号 下 拉 列 表 框 中 选择 一 种 橡皮 擦 型 号 ,并 确保 水 龙头 按钮 图 没有 被 选 
中 ,如 图 9. 39 所 示 。 
(4) 在 舞台 窗口 上 拖 动 鼠 标 指针 ,进行 擦 除 。 
技巧 
双击 工具 栏 中 的 橡皮 擦 工具 国 ,可 迅速 擦 除 舞 台 窗 口上 的 所 有 内 容 。 在 舞台 窗口 上 
要 擦 除 的 区 域 单 击 , 也 可 执行 擦 除 。 





选择 橡皮 擦 工具 , 单 去 【选项 选项 组 中 的 水 龙头 按 包 加 , 然 后 单 击 兽 台 窗 口上 妥 擦 除 
的 线段 或 填充 区 域 , 即 可 擦 除 线段 或 填充 区 域内 的 所 有 颜色 。 


9.3.4 ”自动 捕捉 


在 选取 工具 的 [选项 选项 组 中 还 有 一 个 很 有 用 的 按钮 一 一 自动 捕捉 按钮 骨 。Flash 
Professional 8 的 自动 捕 提 功 能 可 以 帮助 用 户 在 绘制 或 编辑 图 形 时 ,自动 捕捉 到 某 些 关键 点 ， 
如 圆心 .中 心 点 、 顶 点 ,水 平 、. 垂 直 或 45 方向 上 的 点 等 。 拖 动 鼠标 绘制 图 形 时 ,十 字形 鼠标 指 
针 下 面 会 出 现 一 个 小 圆 , 如 果 启 用 捕捉 工具 遇 ., 则 当 捕捉 到 关键 点 时 ,鼠标 指针 下 面 的 小 加 
会 突然 变 大 ,此 时 松 开 鼠 标 , 图 形 就 定位 在 当前 位 置 和 状态 上 。 用 鼠标 拖 动 图 形 时 ,如 果 捕 
捉 到 关键 点 ,鼠标 指针 下 面 也 会 出 现 一 个 圆圈 。 

启用 自动 捕捉 功能 的 方法 很 简单 ,常用 的 操作 方法 有 下 面 3 种 。 

e 在 工具 箱 中 选择 选取 工具 % , 然 后 在 其 选项 选项 组 中 单 击 遇 按钮 。 

e 单 击 标准 工具 栏 中 的 由 按钮 。 

e 选择 [视图 】| 【自动 对 齐 】| 【对 齐 对 象 ] 命 令 。 

如 图 9. 41 显示 的 是 启用 自动 捕 提 功能 绘制 矩形 , 当 捕 捉 到 关键 点 时 显示 出 了 不 同 的 鼠 
标 指针 形状 。 从 图 中 可 以 看 出 :捕捉 到 关键 点 时 ,十 字形 鼠标 指针 下 面 的 圆圈 突然 变 大 。 

拖 动 图 形 时 ,鼠标 指针 在 图 形 上 的 位 置 决 定 了 将 要 捕 提 的 点 ,如 中 心 点 和 顶点 等 。 所 以 
为 了 确保 拖 动 图 形 时 能 自动 捕捉 到 关键 点 ,就 要 将 鼠标 指针 移 向 靠近 这 些 关键 点 的 位 置 。 
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捕捉 图 形 的 关键 点 ,对 于 移动 定位 和 对 齐 图 形 非常 有 用 。 图 9. 42 显示 了 拖 动 图 形 中 ,是 否 捕 
捉 到 关键 点 时 鼠标 指针 的 两 种 状态 。 


人 
(a) 未 捕捉 到 45" 方 向 上 的 点 (b) 捕 到 45" 方 向 上 的 点 
图 9.41 启用 自动 捕捉 功能 画 和 矩形 





(a) 未 捕 到 关键 点 (b) 捕 捉 到 关键 点 
图 9.42 启用 自动 捕捉 功能 移动 图 形 


在 Flash Professional 8 中 ,还 可 以 根据 实际 情况 调整 捕捉 精度 ,具体 操作 步骤 如 下 。 
(1) 选择 [视图 】| 【网 格 】| 【编辑 网 格 ] 命 令 , 打 开 [ 网 格 ] 对 话 框 ,如 图 9. 43 所 示 。 
(2) 从 【对齐 精确 下拉 列 表 框 中 选择 一 种 捕捉 网 格 的 方式 。 

【对 齐 精确 度 】 下 拉 列 表 框 中 各 选项 的 含义 如 下 。 


























图 9. 43 【网 格 ] 对 话 框 


必须 接近 :严格 方式 。 鼠 标 指针 必须 非常 接近 关键 点 时 才能 捕捉 到。 
标准 :正常 方式 。 

可 以 远离 :粗略 方式 。 可 以 远 距 离 捕捉 。 

总 是 对 齐 :总 是 启用 自动 捕 提 功能 。 

(3) 设置 完成 后 , 单 击 【确定 了 按钮 即 可 。 








本 章 内 容 包括 : 
全 动画 制作 

全 为 动画 加 入 声音 

全 元 件 和 蒙 版 的 使 用 

全 输出 和 应 用 Flash 动画 





本 章 要 点 : 


Flash Profsssional 8 是 功能 强 
两 种 : 逐 帧 动画 和 补 间 动画 。 
5 .在 完全 





大 的 网 页 动画 制作 软件 







提供 了 多 种 动画 制作 方法 ,主要 包括 
就 能 方便 快速 地 制作 各 式 各 样 的 
的 画面 ,看 起 来 眼花 练 乱 ， 
1 :会 发 现 再 复杂 的 动画 也 都 是 由 这 几 种 动画 变化 
组 合 而 成 。 ! 要 深入 理 握 了 这 些 基 本 技巧 ,就 可 以 人 出 同样 惊人 的 动画 效果 。 

本 章 将 介绍 Fash Profssional 8 中 动画 制作 的 一 般 技 巧 和 方法 ,给 网 页 增添 更 多 视觉 效果 ， 
而 不 再 是 单调 地 移动 








动画 的 不 同 制作 方 字 
之 前 ,会 觉得 那么 多 i 
了 所 














10.1 基本 动画 制作 


动画 制作 实际 上 就 是 改变 相 邻 帧 的 内 容 的 过 程 。 在 Flash Professional 8 中 ,可 以 制作 
出 对 象 穿 过 有 舞台, 缩放、 旋转, 改变 颜色 、 淡 入 淡出 或 改变 形状 等 动画 。 动 画 可 独立 进行 ,也 
可 与 其 他 动画 相关 进行 。 例 如 ,可 以 使 一 个 对 象 在 穿 过 舞台 的 同时 作 旋 转 和 淡 入 等 动作 。 

在 Flash Professional 8 中 ,创建 动画 有 两 种 方式 , 即 逐 帧 动画 方式 和 补 间 动画 方式 。 逐 
帧 动画 是 在 动画 的 每 一 帧 中 都 创建 或 播放 不 同 的 画面 , 当 这 些 画 面 以 一 定 的 帧 频 显 示 时 就 
形成 了 动画 ; 补 间 动画 只 需 指 定 对 象 在 起 始 帧 和 结束 帧 的 状态 ,由 Flash Professional 8 在 播 
放 时 产生 中 间 帧 。 补 间 动 画 又 可 分 为 动作 补 间 和 形状 补 间 两 种 。 其 优点 是 能 使 文件 所 占 存 
储 空间 最 小 , 它 与 逐 帧 动画 的 不 同 是 只 需 存 储 帧 之 间 的 变化 而 不 是 每 个 帧 。 显 然 , 逐 帧 动画 
比 补 间 动 画 要 占用 更 多 的 存储 空间 。 因 此 ,目前 Web 上 的 动画 仍 以 补 问 动画 为 主 。 


10.1.1 逐 帧 动画 


在 Flash Professional 8 动画 中 ,相对 于 前 一 帧 有 变化 的 帧 称 为 关键 帧 , 它 定 义 了 动画 的 
变化 环节 。 在 创建 逐 帧 动画 时 ,每 一 帧 都 是 关键 帧 ,如 果 某 关键 帧 无 内 容 , 则 称 该 帧 为 空 关 
键 帧 。 在 补 间 动 画 中 ,只 需 在 时 间 轴 关键 位 置 处 创建 关键 帧 ,其 他 帧 由 Flash Professional 8 
自动 创建 。 在 时 间 轴 窗口 中 ,Flash Professional 8 将 以 淡 蓝 色 或 淡 绿 色 箭 头 来 表示 补 间 动 画 
关键 帧 之 间 的 过 渡 帧 。 

在 时 间 轴 窗口 上 ,关键 帧 以 实心 圆圈 表示 , 空 关键 帧 以 空心 贺 圈 表示 ,每 一 层 的 第 1 帧 
都 是 关键 帧 。 


创建 关键 帧 的 方法 有 两 种 : 

@ 选择 一 帧 ,然后 选择 [插入 了 民 时 间 轴 J 民 关键 帧 ] 命 令 。 

e 右 击 时 间 轴 窗口 中 的 某 一 帧 ,然后 从 弹出 的 快捷 菜单 中 选择 [插入 关键 帧 ] 命 令 。 

在 创建 逐 帧 动画 时 ,可 以 事先 把 这 些 帧 都 定义 为 关键 帧 。 要 创建 关键 帧 系列 ,在 时 间 轴 
窗口 中 拖 动 鼠标 指针 选取 连续 的 多 帧 后 ,选择 [插入 】I【 时 间 轴 】I【 关 键 帧 ] 命 令 ,这 时 ,选取 
的 多 个 连续 帧 就 都 成 为 关键 帧 。 

由 于 逐 帧 动画 是 通过 改变 相 邻 帧 的 内 容 而 产生 的 动画 ,因此 它 最 适 于 创建 相当 复杂 的 
动画 ,而 不 是 仅 产生 移动 或 色彩 变化 的 图 片 。 如 前 所 述 , 逐 帧 动画 比 补 间 动 画 要 占据 更 多 的 
存储 空间 。 

创建 逐 帧 动画 的 一 般 步骤 如 下 。 

(1) 在 时 间 轴 窗口 中 选择 逐 帧 动画 的 第 一 帧 。 





(2) 如 果 该 帧 不 是 关键 帧 ,选择 【插入 了 代 时 间 轴 了 J 民 关键 帧 ] 命 令 ,使 它 成 为 关键 帧 。 
(3) 在 该 帧 中 创建 动画 的 第 一 张 图 片 。 


创建 图 片 时 可 以 使 用 绘图 工具 绘制 ,或 从 剪贴 板 中 粘贴 ,也 可 导入 文件 。 





(4) 单 击 选择 下 一 帧 ,选择 [插入 了 人 工时 间 轴 了 民 关 键 帧 】 命 令 ,再 插入 一 个 关键 帧 。 
(5) 编辑 或 改变 这 一 帧 的 内 容 。 

(6) 重复 步骤 (4) 一 (5) ,直到 完成 整个 动画 中 所 有 帧 的 内 容 的 创建 和 编辑 为 止 。 
在 创建 逐 帧 动画 的 过 程 中 ,应 该 经 常 播放 动画 ,以 根据 播放 的 情况 对 动画 做 出 修改 。 
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10.1.2 制作 动作 补 间 动 画 


动作 补 间 动画 是 补 间 动画 的 一 种 ,是 针对 某 一 层 上 的 单一 的 实例 、 群 组 和 文本 块 而 言 
的 。 通 常 的 作法 是 在 某 一 关键 帧 内 设置 实例 、 群 组 或 文本 块 对 象 的 位 置 、 大 小 和 旋转 的 属 
性 ,在 另 一 关键 帧 内 改变 这 些 属性 。Flash Professional 8( 以 下 简写 为 Flash) 会 自动 根据 设 
置 的 关键 帧 的 情况 ,做 插值 运算 ,产生 动画 。 
此 外 ,Flash 还 可 以 对 实例 、 群 组 和 文本 块 进行 颜色 补 间 ,使 实例 淡 入 或 淡出 。 要 对 群 组 
或 文本 块 作 颜色 补 间 ,需要 先 把 它们 转换 为 元 件 。 如 果 对 一 个 不 是 由 元 件 创 建 的 对 象 设置 
补 间 动画 ,Flash 会 自动 将 它 转变 为 元 件 ,并 命名 为 “ 补 间 1”“ 补 间 2? 和 * 补 间 3” 等 。 有 关 元 
件 的 详细 内 容 ,请 参阅 10. 3 节 中 的 相关 叙述 。 
为 实例 、 群 组 和 文本 块 设 置 动 作 补 间 动 画 的 步 又 如 下 。 
(1) 选择 动画 的 开始 帧 ,再 选择 【插入 了 区 时 间 轴 了 区 关键 帧 3 命令 创建 起 始 关 键 帧 。 
(2) 在 起 始 关 键 帧 内 绘制 对 象 或 在 [ 库 ] 面 板 中 创建 一 个 实例 。 
(3) 选择 [插入 】I【 时 间 轴 3I【 创 建 补 间 动 画 ] 命 令 , 如 果 此 时 舞台 上 的 对 象 是 绘制 的 ， 
Flash 将 把 它 转换 为 名 为 “ 补 间 1” 的 元 件 。 
(4) 选择 动画 的 结束 帧 ,选择 【插入 了 人 工时 间 轴 了 工 关键 帧 3 命令 ,创建 动画 的 结束 关键 
帧 ,然后 在 结束 帧 内 编辑 对 象 。 
(5) 把 光标 置 于 起 始 关键 帧 内 , 选 定 该 帧 ,选择 【窗口 3 民 属 性 了 民 属 性 了 命令 ,显示 如 图 
10.1 所 示 的 【[ 属 性] 面板 。 在 该 面板 中 ,可 以 设置 选 定 对 象 的 补 间 属性 。 
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图 10.1 关键 帧 [属性 ] 面 板 
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”要 使 对 象 的 大 小 产生 补 间 效 果 , 选 中 [缩放 】 复 选 框 。 

@ ”要 使 对 象 发 生 旋转 ,可 从 [旋转] 下 拉 列 表 框 中 选择 非 [ 无 选项 ,并 在 右边 的 文 
本 框 中 输入 旋转 的 圈 数 。 如 果 该 文本 框 内 没有 输入 数字 ,对 象 将 不 发 生 旋 转 。 
选择 [自动 ] 选 项 将 按 对 象 目 标 角度 取 捷径 旋转 。 

e 为 使 群 组 对 象 最 下 方 的 线条 或 实例 动画 与 预 设置 的 路 径 相符 ,可 选中 [调整 到 
路 径 】 复 选 框 。 

e 单 击 【组 动 ] 文 本 框 右 侧 的 按钮 时 ,将 出 现 调节 数值 的 滑 块 拖 动 滑 块 到 In 一 端 
时 ,将 减 慢 变换 开始 时 的 速度 ; 滑 块 在 Out 一 端 时 ,将 减 慢 变换 结束 时 的 速度 。 
滑 块 离 In 或 Out 中 的 一 端 越 近 , 相 应 的 速度 的 改变 就 越 明 显 。 例 如 , 当 滑 块 离 
In 端 较 近 时 ,变换 将 缓慢 开始 ,逐渐 加 速 直到 结束 ; 当 滑 块 在 中 央 时 ,变换 以 固 
定 速度 进行 。 默 认 情况 下 ,变换 速度 是 固定 的 。 可 通过 设置 的 值 创建 出 更 自然 
的 加 速 和 减速 的 效果 。 

e@ 若 要 使 带动 画 的 实例 能 顺利 地 在 主 影片 中 循环 播放 ,可 选中 同步] 复 选 框 。 

e@ 若 要 使 设置 的 动画 实例 自动 与 动画 辅助 层 对 齐 , 可 选中 [对齐 】 复 选 框 。 

若 要 使 对 象 在 运动 过 程 中 产生 颜色 补 间 效果 ,可 分 别 在 起 始 关 键 帧 和 结束 关键 帧 

中 选 定 对 象 ,然后 选择 [窗口 I【 属 性 YI【 属 性 命令, 显示 [属性] 面板 ,如 图 10.2 

所 示 。 
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在 【属性 了 面板 中 ,可 以 从 【颜色 了 右 侧 的 下 拉 列 表 框 中 选择 对 象 的 特效 模式 ,共有 
无 亮度、 色调 .Alpha 和 高 级 5 个 选择 ,用 以 设置 对 象 的 亮度 变化 色彩 变化 及 透明 
选择 [窗口 3 民工 具 栏 ] 民 控制 器 命令 ,打开 【控制 器 1 控制 栏 。 单 击 【 控 制 器 3 栏 中 
的 【播放 了 按钮 中, 测试 动画 效果 。 


10.1.3 制作 沿路 径 运 动 的 动画 


10.1.2 节 中 讨论 了 动作 补 间 动 画 的 制作 方法 。 大 家 知道 ,普通 的 动作 动画 中 ,对 象 的 移 
动 路 径 是 由 Flash 根据 初始 位 置 与 结束 位 置 安排 的 ,只 是 一 条 直线 。 若 改 为 沿路 径 变 化 则 弥 


补 了 这 一 


方面 的 不 足 。 可 以 使 用 钢笔 工具 在 舞台 上 绘制 任意 曲线 ,使 对 象 沿 曲线 路 径 运动 。 


制作 沿路 径 运 动 的 动画 的 步骤 如 下 。 


《] 


参照 10. 1. 2 节 中 的 介绍 制作 一 个 动作 补 间 动 画 。 


(2) 选择 [ 插 和 人 了 民 时 间 轴 了 民运 动 引导 层 命令 。 这 时 Flash 将 在 当前 层 上 方 创建 一 个 
新 层 , 该 层 名 称 左边 有 一 个 路 径 图 标 , 如 图 10. 3 所 示 。 

(3) 创建 运动 引导 层 后。 此 时 .可 以 使 用 绘图 工具 (铅笔 直线、 矩形 或 画笔 等 ) 画 出 所 
需 的 路 径 。 








图 10.3 为 动画 添加 的 图 层 


如 果 在 制作 动画 时 在 【属性 了】 面板 中 选中 了 对 齐 】 复 选 框 , 则 对 象 的 标记 点 会 自动 与 
所 画 路 径 的 起 点 对 齐 。 
(4) 调整 起 始 帧 中 与 结束 帧 中 对 象 在 路 径 中 的 位 置 。 一 般 在 起 点 关键 帧 中 ,将 对 象 放 
置 在 路 径 的 起 点 ,在 结束 关键 帧 中 将 对 象 放置 在 路 径 的 终点 ,如 图 10.4 所 示 。 
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图 10.4 确定 两 帧 中 的 对 象 位 置 
(5) 为 了 在 动画 播放 时 只 看 到 对 象 的 运动 ,应 把 路 径 层 隐藏 起 来 。 在 时 间 轴 窗口 中 单 
击 路 径 层 的 眼睛 图 标 即 可 。 
(6) 选择 [窗口 3 民工 具 栏 ] 民 控制 器 命令 ,打开 【控制 器 面板。 单 击 【 控 制 器 面板 中 
的 【播放 了 按钮 与, 测试 动画 效果 。 


10.1.4 制作 图 形 补 间 动 画 


图 形 补 间 动 画 是 指 对 象 在 一 定时 间 内 外 形 发 生变 化 的 动画 。 同 运动 动画 一 样 , 图 形 补 
间 动 画 也 包括 对 象 的 位 置 、 大 小 和 颜色 的 变化 ,但 主要 以 形状 的 变化 为 主 。 与 运动 动画 不 同 
的 是 ,图 形 补 间 动 画 的 对 象 是 分 离 的 可 编辑 图 形 。 

图 形变 化 是 通过 图 形 的 节点 (Shape Hints) 来 控制 的 ,这 些 节 点 记录 了 原始 图 形 与 新 图 
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| 人形 间 对 应 部 位 的 变化 情况 ,然后 由 Flash 对 这 种 变化 进行 插值 运算 ,生成 中 间 帧 的 图 形 。 
要 对 实例 、 群 组 ,文本 块 或 位 图 进行 外 形 补 间 , 必 须 先 选择 【修改 〗】I【 分 离 ] 命 令 将 其 变 
成 分 离 的 图 形 。 


创建 图 形 补 间 动 画 的 步骤 如 下 。 

(1) 在 时 间 轴 窗口 中 单 击 某 一 层 , 使 其 变 为 当前 层 。 

(2) 选择 一 个 空 帧 作为 动画 的 起 始 关键 帧 。 

(3) 在 起 始 关键 帧 中 创建 一 个 图 形 。 
提示 

可 使 用 任何 绘图 工具 来 创建 图 形 ,但 变形 的 目标 图 形 必须 与 原 图 形 在 同一 层 上 。 如 
果 要 对 群 组 ,元 件 、 文 本 块 或 位 图 作 形 状 补 间 , 可 选 定 对 象 , 然 后 选择 【修改 】 人 分离】 命令 
将 其 转换 成 分 离 的 图 形 。 


(4) 根据 动画 的 长 度 在 开始 帧 后 选择 一 帧 创建 结束 关键 帧 。 

(5) 在 结束 关键 帧 中 编辑 图 形 。 结 束 关键 帧 上 的 图 形 可 以 是 对 开始 关键 帧 中 图 形 的 修 
改 , 如 整形 .变色 和 移 位 等 ,也 可 以 是 将 原始 图 形 删除 后 新 建 的 一 个 图 形 。 

(6) 在 时 间 轴 窗口 中 选中 起 始 帧 ,然后 选择 [窗口 XI【 属 性 YI【 属 性 命令 ,显示 [属性 】 
面板 。 

(7) 在 [ 补 间 ] 下 拉 列 表 框 中 选择 【形状 3 选项 ,此 时 的 面板 如 图 10. 5 所 示 。 















































图 10.5 帧 [属性 ] 面 板 


(8) 在 【混合 】 下 拉 列 表 框 中 选择 对 象 的 混合 模式 。 
® 分布 式 :选择 此 模式 可 使 动画 的 中 间 过 渡 图 形 更 加 平滑 。 
e 角形 :选择 此 模式 可 使 动画 的 中 间 过 渡 图 形 保持 原 有 的 棱角 。 此 模式 仅 适 用 于 

有 尖锐 棱角 的 图 形变 换 。 

(9) 设置 图 形 补 间 的 值 。 此 下 拉 列 表 框 与 生成 动作 补 间 动 画 时 设置 的 含义 相同 。 

(10) 选择 [窗口 3 民工 具 栏 ] 民 控制 器 命令 ,打开 【控制 器 面板 。 单 击 【 控 制 器 了 面板 中 
的 【播放 按钮 中 ,测试 动画 效果 。 

为 了 更 精确 地 控制 外 形 补 间 的 效果 ,可 以 在 起 始 帧 与 结束 帧 之 间 多 添加 几 个 关键 帧 ,在 

这 些 帧 中 灵活 控制 图 形 节 点 的 位 置 就 可 以 取得 较 完美 的 效果 。 


使 用 节点 可 实现 更 复杂 甚至 看 来 不 可 能 实现 的 图 形 补 间 动画 。 在 原始 图 形 和 目标 图 形 
中 ,节点 是 一 一 对 应 的 。 例 如 ,要 对 从 文字 *2” 到 文字 *9” 的 变化 进行 限制 ,可 以 把 文字 的 角 
设置 为 节点 ,如 图 10.6 所 示 。 这 样 ,在 进行 补 间 时 ,文字 的 角 就 不 至 于 和 其 他 部 分 混淆 。 


图 10.6 设置 节点 以 控制 变形 
设置 节点 后 ,每 个 节点 以 字母 标明 ,这 样 可 更 加 明确 在 原始 图 形 与 目标 图 形 中 它们 的 对 
应 关系 。 最 多 可 设置 26 个 节点 。 当 节点 位 于 图 形 内 部 时 呈 红 色 , 位 于 原始 图 形 边 角 上 时 呈 
黄色 ,而 在 目标 图 形 边 角 上 时 旦 绿色 。 
在 制作 图 形 补 间 动 画 时 使 用 节点 的 步骤 如 下 。 
(1) 在 时 间 轴 窗口 中 ,选择 图 形 补 间 动 画 系列 的 第 1 帧 。 
(2) 选择 [修改 】I【 形 状 3I【 增 加 形状 提示 命令 添加 一 个 节点 。 第 1 个 节点 为 标 有 字母 
“a” 的 红色 圆圈 。 
(3) 将 该 节点 移动 到 要 标记 的 位 置 ,例如 数字 *2” 的 左上 角 。 
(4) 选择 动画 系列 的 最 后 一 个 关键 帧 ,在 该 帧 中 也 会 发 现 标 以 “a” 的 红色 小 圆圈 , 它 代表 
目标 节点 。 
(5) 将 目标 节点 移动 到 原始 节点 变换 后 的 目标 位 置 , 例 如 数字 “9” 的 顶部 。 
(6) 播放 动画 测试 效果 ,然后 根据 播放 的 情况 对 节点 位 置 做 进一步 的 调整 。 
(7) 重复 以 上 步骤 加 入 并 编辑 其 他 节点 ,新 加 入 的 节点 将 以 bc、d 等 命名 。 
(8) 播放 动画 ,查看 动画 的 播放 效果 。 
提示 


若 要 查看 当前 层 当 前 帧 上 所 有 的 节点 ,可 选择 [查看 】 人 区 显示 形状 提示 了】 命令 。 若 要 删 
除 节点 ,可 用 鼠标 直接 把 它 拖 出 舞台 。 若 要 删除 所 有 节点 ,可 选择 【修改 了 代 形 状 了 代 贡 除 
所 有 提示 ]】 命 令 。 


在 制作 图 形 补 间 动 画 时 ,可 使 用 以 下 几 种 方法 进一步 提高 动画 的 最 终 效果 。 

e ”在 制作 较 复杂 外 形 补 间 效 果 时 ,可 在 起 始 关键 帧 与 结束 关键 帧 之 间 多 创建 几 个 关键 
帧 ,并 在 这 些 帧 中 创建 一 些 过 渡 图 形 。 

e 使 节点 的 摆 放 位 置 更 符合 客观 上 的 逻辑 顺序 。 例 如 ,一 条 直线 上 有 3 个 节点 ,这 3 个 
节点 的 顺序 为 a、b、c, 那 么 它们 在 目标 线条 上 的 顺序 也 应 该 为 a、b、c。 

e 在 摆 放 节点 时 ,最 好 从 图 形 的 左上 角 开 始 , 按 逆 时 针 方向 摆 放 ,这 样 做 可 提高 节点 的 
工作 效率 。 
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10.2 为 动画 加 入 声音 


许多 动画 在 制作 完成 后 ,往往 还 要 加 上 与 动画 意境 相配 合 的 声音 ,以 形成 类 似 电影 的 效 
果 。Flash 提供 了 多 种 使 用 声音 的 途径 , 既 可 以 使 声音 独立 于 时 间 轴 窗口 之 外 连续 播放 ,也 
可 使 音 轨 中 的 声音 与 动画 同步 ,使 它 在 动画 播放 的 过 程 中 淡 入 或 淡出 。 通 过 这 些 设置 ,可 使 
制作 的 动画 更 富 表现 力 。 

Flash 中 使 用 的 声音 有 两 种 :事件 声音 (event sounds) 和 声音 流 (stream sounds)。 事 件 
声音 在 播放 之 前 必须 被 完全 下 载 ,在 播放 时 除非 有 命令 使 它 停 止 ,否则 它 将 持续 播放 ;而 声 
音 流 则 只 要 下 载 了 前 几 帧 的 声音 数据 即 可 开始 播放 , 且 与 时 间 轴 窗口 同步 。 

加 入 声音 的 步骤 如 下 。 

(1) 选择 [文件 ] 民 导入 了 人 区 导入 到 舞台 3 命令 ,打开 【导入 对 话 框 ,如 图 10. 7 所 示 。 

(2) 在 [文件 类 型 J 下拉 列表 框 中 选择 要 导入 的 声音 文件 的 格式 。 

(3) 在 [查找 范围 ] 下 拉 列 表 框 中 选择 要 导入 的 声音 文件 。 

若 要 一 次 导入 多 个 声音 文件 ,可 在 选择 声音 文件 时 按 下 Ctrl 键 或 Shift 键 。 


(4) 单 击 [打开 按钮。 此 时 ,选择 的 声音 文件 即 被 作为 一 个 元 件 导入 到 【 库 了 面板 中 。 








图 10.7 【导入 ] 对 话 框 


与 其 他 元 件 一 样 , 一 个 声音 文件 也 可 以 在 影片 中 的 不 同 地 方 使 用 。 

(5) 选择 [插入 了 人民 时间 轴 了 区 图 层 ] 命 令 ,在 当前 动画 中 为 声音 创建 一 个 新 层 。 
提示 

可 以 向 动画 中 加 入 任意 的 声音 ,但 受 Flash 中 层 数 的 限制 。 每 一 层 相当 于 一 个 独立 的 
声 道 ,在 播放 影片 时 ,所 有 层 上 的 声音 都 将 播放 。 





(6) 在 新 建 的 声音 层 上 单 击 预定 开始 播放 声音 的 帧 ,然后 从 【 库 ] 面 板 中 将 声音 元 件 拖 
动 到 工作 窗口 中 。 此 时 ,声音 层 中 从 指定 的 帧 开始 即 出 现 一 段 声音 波形 ,如 图 10. 8 
所 示 。 




















二 | 
ET | 全 | 20 [00 放 
图 10.8 将 声音 添加 到 动画 中 
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这 时 ,声音 即 被 加 入 到 动画 的 一 个 * 声 道中。 可 以 重复 以 上 方法 将 所 有 需要 的 声音 文 
件 都 添加 到 影片 中 。 

向 影片 中 插入 声音 时 ,要 综合 考虑 存储 空间 和 音质 两 方面 因素 ,最 好 使 用 MP3 格式 的 
文件 。 在 导入 声音 文件 后 ,Flash 会 自动 对 声音 进行 压缩 处 理 。 要 改变 声音 的 压缩 方式 ， 
可 在 【 库 ] 面 板 中 右 击 声 音 元 件 , 从 弹出 的 快捷 菜单 中 选择 [属性 I 命令 ,打开 如 图 10. 9 所 示 
的 【声音 属性 ] 对 话 框 ,然后 在 [压缩] 下拉 列 表 框 中 选择 声音 的 压缩 方式 。 





将 声音 添加 到 影片 中 后 ,定义 声音 的 起 始 播 放 点 、 控 制 播放 时 的 音量 等 操作 。Flash 可 
以 改变 声音 的 起 始点 和 结束 点 ,这 对 于 删 去 不 需要 的 部 分 、 使 声音 占据 更 小 的 存储 空间 大 有 
帮助 。 


区 
pH5oundETfect 乐 中 类 打击 乐 03 WAV 


1993 年 11 月 9 日 14:34:48 ee 
之 He 音声 道 8 位 0.5s10.9K8 














图 10.9 【声音 属性 ] 对 话 框 








新 编 网 页 制作 入 门 与 提高 





























编辑 声音 效果 的 步骤 如 下 。 
(1) 单 击 声 音 所 在 的 层 ,选择 [窗口 II[ 属 性 JI[ 属 性 命令, 显示 [属性 ] 面 板 , 如 图 10. 10 
所 示 。 
Fv 必 性 
原 。 天 加 @ 
一 全 标 答 》 | 效果 :无 
全 





祭 和 类 到 | 同事 和 。 疯 | 重 各 E |] 


也 单 声 道 6 位 0.5510.9 上 ， 


b 


图 10.10 帧 [属性 】 面板 


(2) 在 【声音 了 下 拉 列 表 框 中 选择 要 置 于 当前 层 的 声音 文件 。 如 果 需 要 的 声音 文件 未 在 
下 拉 列 表 框 中 显示 , 则 需要 先导 入 它 。 


(3 


二 


(4 


在 【同步 下拉 列 表 框 中 选择 声音 与 影片 的 同步 方式 ,有 如 下 4 种 方式 。 


事件 :选择 此 选项 后 将 把 声音 与 某 一 事件 的 发 生 同 步 起 来 。 也 就 是 说 ,影片 播 
放 到 声音 的 起 始 帧 时 它 开 始 播放 。 但 它 独立 于 时 间 轴 窗口 ,即使 影片 在 声音 播 
放 完 毕 之 前 结束 ,也 不 会 影响 它 的 播放 。 

开始 :选择 此 选项 的 效果 与 选择 【事件 选项 的 效果 大 致 相同 ,惟一 不 同 之 处 在 
于 , 当 影 片 播放 到 声音 的 起 始 帧 时 车 有 其 他 声音 播放 , 则 该 声音 将 不 播放 。 
停止 :选择 此 选项 后 可 使 指定 的 声音 不 播放 。 

数据 流 : 选 择 此 选项 后 ,声音 与 影片 在 浏览 时 将 同步 播放 。Flash 将 强迫 动画 与 
声音 流 同 步 , 如 果 动 画 的 速度 跟 不 上 ,将 忽略 某 些 帧 。 与 [事件 ] 选 项 不 同 的 是 ， 
声音 流 将 与 动画 一 起 停止 。 


在 【重复 ] 文 本 框 中 输入 声音 重复 播放 的 次 数 。 如 果 和 希望 声音 重复 不 停 地 播放 ,可 


输入 较 大 的 数字 。 


a 


在 【效果 下 拉 列 表 框 中 选择 对 声音 的 控制 方法 ,有 以 下 8 种 方法 。 


无 :对 声音 文件 不 加 入 任何 效果 ,选择 该 选项 可 取消 以 前 设置 的 效果 。 
左 声 道 :只 在 左 声 道 播放 声音 。 

右 声 道 :只 在 右 声 道 播放 声音 。 

从 左 到 右 淡 出 :使 声音 的 播放 从 左 声 道 移 到 右 声 道 。 

从 右 到 左 淡出 :使 声音 的 播放 从 右 声 道 移 到 左 声 道 。 

淡 入 :在 声音 播放 期 间 逐 渐 增 大 音量 。 

淡出 :在 声音 播放 期 间 逐 渐 减 小 音量 。 

自 定 :允许 创建 自己 的 声音 播放 效果 。 


选择 【 自 定 】 选 项 或 单 击 【编辑 ] 按 钮 后 ,将 打开 如 图 10. 11 所 示 的 [编辑 封套 3 对话 框 并 对 
音效 果 进 行 编辑 。 

e” 若 要 改变 声音 的 起 始点 和 结束 点 ,可 以 拖 动 图 中 的 起 始点 控制 柄 和 结束 点 控制 柄 。 

ee 若 要 改变 声音 的 幅度 包 络 线 , 可 拖 动 包 络 线 上 的 控制 柄 。 包 络 线 的 变化 反映 了 播放 


时 声音 的 音量 变化 。 在 包 络 线 上 单 击 可 创建 多 达 8 个 控制 柄 ,要 删除 某 个 控制 柄 ， 
将 其 拖 出 窗口 即 可 。 

对 话 框 中 的 放大 和 缩小 按钮 用 于 对 该 声音 波形 的 跨度 放大 或 缩小 。 

单 击 秒 和 帧 按钮 可 使 时 间 单位 在 秒 和 帧 之 间 切 换 。 


包 络 线 控制 柄 包 络 线 






第 
己 
章 
动 
画 
制 
作 








起 始点 控制 柄 结束 点 控制 枉 





缩小 秒 
图 10. 11 【编辑 封套 ] 对 话 框 





10.3 ”元件 和 蒙 版 的 使 用 


要 在 Flash 中 制作 出 更 多 更 有 趣 的 动画 ,只 掌握 10. 3 节 介 绍 的 动画 制作 技巧 是 不 够 的 ， 。 
还 需 掌握 更 多 的 技巧 ,如 元 件 和 蒙 版 功能 。 使 用 这 两 项 功能 可 以 制作 出 更 具有 变化 的 动画 。 


10.3.1 元 件 功能 概述 


元 件 是 存放 在 【 库 了 面板 中 可 被 反复 取出 使 用 的 图 形 、 动 画 、 按 钮 或 声音 。 如 图 10. 12 所 @ 
示 攻 库 了 面板 中 包括 有 影片 剪辑 图形 和 按钮 ,这 些 显 示 的 内 容 均 属 于 元 件 。 使 用 元 件 时 ,只 
要 在 【 库 了 面板 中 选中 要 应 用 的 元 件 , 并 拖 动 至 窗口 中 的 适当 位 置 , 就 可 以 将 此 元 件 应 用 到 动 
画 中 作为 其 中 的 一 个 角色 。 





























车 在 [ 库 ] 面 板 中 双击 元 件 图 标 ( 如 飞鸟 左 侧 的 图 标 轿 ) 或 双击 面板 上 方 的 预览 框 ,就 
可 以 打开 该 元 件 对 它 重 新 编辑 。 


应 用 元 件 有 以 下 几 个 优点 。 

e@ 使 用 元 件 可 以 使 动画 制作 变 得 更 加 简单 .方便 。 主 要 表现 在 两 个 方面 :其 一 ,元 件 可 
以 在 同一 个 动画 中 重复 使 用 ;其 二 ,只 要 修改 元 件 内 容 , 就 可 以 自动 更 改 已 应 用 到 动 
画 中 的 所 有 该 元 件 内 容 。 

@ 使 用 元 件 可 以 减少 动画 文件 的 体积 ,加 快 动画 播放 速度 。 因 为 在 播放 动画 时 ,即使 
在 动画 中 重复 使 用 了 同一 元 件 . 也 只 需 下 载 一 次 ,而 不 需 逐 个 下 载 。 

e ”使 用 元 件 可 以 更 容易 地 制作 出 更 多 变化 的 动画 。 例 如 ,用 户 可 以 使 用 元 件 制作 出 一 段 
小 动画 ,独立 于 主动 画 进行 播放 。 比 如 ,要 制作 出 一 个 小 鸡 快 跑 的 动画 ,就 可 以 将 小 鸡 
展翅 的 动作 制作 成 一 个 元 件 ,而 在 主场 景 中 制作 出 小 鸡 沿 着 某 个 方向 跳跃 的 动画 。 

场景 名 称 。 单 击 它 


可 切换 到 场景 中 进 元 件 名 称 。 在 此 显 
行 编辑、 示 当前 编 镁 的 元 件 








单 击 此 按钮 可 以 打 
开 下 拉 菜单 ， 从 中 
选择 要 编辑 的 元 件 
单 击 项 览 框 中 的 图 
像 或 列表 框 中 的 元 
件 名 称 ， 然 后 拖 动 
到 窗口 中 ， 可 以 将 
元 件 应 用 到 动 面 中 
单 击 此 按钮 可 以 打 
ES 开 下 拉 菜单 ， 从 中 
= 二 | 选择 缕 编 辑 的 场景 


10.12 应 用 【 库 ] 面 板 中 的 元 件 








10.3.2 新 建 元 件 


要 使 用 元 件 制作 动画 ,首先 要 创建 元 件 。 在 Flash 中 可 以 创建 3 种 不 同类 型 的 元 件 , 分 
别 为 图 片 .按钮 和 影片 剪辑 。 


1. 创建 图 片 元 件 


图 片 元 件 一 般 是 只 含 一 帧 的 静止 图 片 , 有 时 也 可 以 制作 成 由 多 个 帧 组 成 的 动画 。 下 面 
创建 一 个 “飞鸟 "图 形 元 件 , 具 体操 作 步 又 如 下 。 
(1) 先 建立 一 个 新 文件 ,然后 选择 【插入 了 民 新 建 元 件 ] 命 令 。 
(2) 打开 【创建 新 元 件 ] 对 话 框 , 如 图 10. 13 所 示 。 在 【名 称 】 文 本 框 中 输入 元 件 的 名 称 ; 
然后 在 【行为 3 选项 组 中 选择 一 种 元 件 类 型 ,如 图 10. 13 所 示 选 中 [图 形 了 单 选 按钮 ; 


然后 单 击 【确定 按钮 。 


单 击 【 库 了 面板 底部 的 回 按 钮 或 按 Ctrl 十 F8 组 合 键 , 也 可 以 打开 【创建 新 元 件 】 对 话 框 。 





名 称 丰 ; 











行为 @): 〇 影片 入 辑 
〇 控 纽 
om 








图 10. 13 【创建 新 元 件 ] 对 话 框 


(3) 此 时 进入 元 件 编辑 状态 ,现在 可 以 开始 编辑 元 件 了 。 首 先 创建 出 “飞鸟 ?的 第 一 帧 
图 像 , 即 展翅 时 的 图 像 。 创 建 “ 飞 鸟 " 的 操作 时 ,可 以 用 Flash 中 的 绘制 工具 绘制 ,也 
可 以 从 外 部 导入 。 完 成 后 的 效果 如 图 10. 14 所 示 。 


在 元 件 编辑 状态 下 ,可 能 觉得 与 主场 景 的 窗口 没有 区 别 , 而 仔细 看 就 会 发 现 是 有 区 别 


的 , 即 在 工作 窗口 中 会 有 一 个 “十 ”号 , 它 是 元 件 的 中 心 点 ,编辑 元 件 以 此 点 为 中 心 ;此 外 ， 
在 工作 窗口 上 方 会 出 现 当前 正在 编辑 的 元 件 名 称 " 飞 岛 ", 如 图 10. 14 所 示 。 


(4) 接着 在 第 2 帧 上 插入 一 个 空白 帧 ,并 在 第 2 帧 中 制作 出 “飞鸟 " 振 翅 的 图 像 ,接着 再 
插入 6 个 关键 帧 ,绘制 整个 飞翔 的 动作 ,如 图 10. 15 所 示 。 这 样 一 个 图 片 元 件 就 创 
建 完 成 。 要 预览 效果 .可 以 在 [ 库 ] 面 板 的 预览 框 中 单 击 矶 按钮 。 
提示 
图 片 元 件 可 以 由 许多 帧 组 成 , 它 是 制作 动画 的 基本 元 素 。 但 是 这 种 类 型 的 元 件 有 一 
个 缺点 , 即 用 户 不 能 对 它 添加 交互 行为 和 声音 等 效果 。 











Pu :> 


图 10.14 制作 出 第 1 帧 图 10.15 制作 6 个 关键 帧 
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上 述 是 创建 图 片 元 件 的 一 般 过 程 ,如 果 要 创建 的 元 件 效果 不 一 样 , 则 编辑 元 件 的 过 程 
也 会 有 所 不 同 。 


2. 创建 按钮 元 件 


按钮 元 件 是 一 种 特殊 的 元 件 , 可 以 在 不 同 的 鼠标 状态 下 显示 不 同 的 画面 ,并 且 当 单 击 按 
钮 时 , 它 会 执行 某 种 特定 的 动作 。 
在 7.3 节 中 曾经 介绍 过 悬 停 按 钮 的 作用 ,按钮 元 件 与 此 非常 相似 , 它 也 有 3 种 不 同 状 态 
的 画面 显示 效果 , 即 * 弹 起 (正常 状态 )“ 指 针 经 过 ”( 鼠 标 移 过 ) 和”* 按 下 (鼠标 按 下 ) ,另外 
“点 击 ” 关 键 帧 用 来 确定 响应 鼠标 事件 的 区 域 。 所 以 ,只 要 知道 了 甚 停 按 钮 的 功能 ,对 按钮 元 
件 的 作用 也 就 不 难 理解 了 。 
下 面 是 创建 一 个 按钮 元 件 的 操作 步骤 。 
(1) 先 选择 [插入 区 新 建 元 件 ] 命 令 或 按 Ctrl 十 F8 组 合 键 , 打 开 如 图 10. 13 所 示 的 【 创 
建新 元 件 ] 对 话 框 ,在 其 中 设置 名 称 ,并 选择 元 件 类 型 为 [按钮 】, 单 击 [ 确 定 ] 按 钮 。 
(2) 进入 元 件 编辑 状态 ,如 图 10. 16 所 示 。 假 设 要 制作 一 个 “确定 ”按钮 , 即 当 鼠标 指针 
移 到 按钮 上 时 ,按钮 颜色 变 浅 ,而 单 击 时 按钮 会 呈现 凹 下 的 立体 效果 。 如 图 10. 16 
所 示 ,在 第 1 帧 即 “ 弹 起 ”关键 帧 中 绘制 按钮 图 形 ,并 输入 “确定 ?两 个 文字 。 
(3) 接着 在 第 2 帧 和 第 3 帧 ( 即 * 指 针 经 过 >” 和"* 按 下 ? 帧 ) 上 ,分 别 插入 一 个 关键 帧 ,并 创 
建 出 各 自 状态 下 的 画面 ,如 图 10. 17 所 示 。 


SPND> om- 
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图 10.16 在 第 1 帧 上 制作 正常 状态 的 图 像 
(4) 最 后 ,在 第 4 帧 ( 即 “ 点 击 ” 帧 ) 插 入 一 个 关键 帧 ,在 此 面 出 一 个 和 矩形 ,以 确定 按钮 的 作 
用 范围 ,如 图 10. 18 所 示 。 





点 击 ? 状 态 是 不 可 见 的 , 它 只 是 用 来 确定 按钮 的 作用 范围 ,该 范围 必须 是 一 个 实心 的 
图 案 ,并 且 要 求 能 够 将 “上 ”、“ 指 针 经 过 ”和 " 按 下 ?状态 下 的 内 容 履 盖 掉 ,以 免 播放 时 ,鼠标 
指针 在 按钮 的 某 些 部 分 移动 或 单 击 时 不 起 作用 。 如 果 没 有 定义 “点 击 ” 的 范围 , 则 会 以 
“上 ”状态 的 画面 为 作用 范围 。 要 在 “点 击 ”状态 下 绘制 出 图 案 , 可 以 使 用 Flash Profession- 
al 8 提供 的 绘图 工具 ,其 形状 不 受 限制 。 


经 过 如 上 步骤 就 可 以 创建 一 个 按钮 元 件 。 
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图 10.18 设置 按钮 第 4 帧 效果 


3. 创建 影片 剪辑 元 件 


影片 剪辑 元 件 是 一 段 可 以 反复 使 用 的 动画 ,可 以 独立 于 动画 进行 播放 ,也 可 以 说 是 
Flash 动画 中 的 嵌 套 动画 。 制 作 影 片 剪 辑 元 件 与 制作 Flash 动画 其 实 没有 什么 差别 ,只 是 意 
义 上 不 同 而 已 。 
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创建 影片 剪辑 元 件 的 操作 过 程 与 创建 图 片 元 件 的 过 程 是 相同 的 ,不 同 的 是 制作 此 类 元 
件 时 ,需要 在 [创建 新 元 件 3 对 话 框 中 选中 [影片 剪辑 单 选 按钮 。 


10.3.3 元 件 应 用 实例 


下 面 实践 一 下 使 用 元 件 制作 动画 。 这 是 一 个 “飞鸟 展翅 飞翔 ?的 动画 ,其 中 飞鸟 展翅 的 
动作 需要 制作 成 一 个 元 件 。 其 操作 步骤 如 下 。 

(1) 先 根据 10. 3. 2 节 介绍 的 创建 图 片 元 件 的 方法 制作 出 飞鸟 展翅 的 动作 。 

(2) 选择 【编辑 了 代 编 辑 文档 命令 切换 到 主场 景 中 ,然后 按照 10. 3. 1 节 介绍 的 方法 将 元 
件 拖 动 到 窗口 中 ,如 图 10. 19 所 示 ,并 将 元 件 放置 在 窗口 左 侧 边缘 。 

(3) 然后 在 某 一 帧 位 置 (根据 动 画 长 度 而 定 ) 插 入 一 个 关键 帧 ,并 将 这 一 帧 的 图 像 拖 动 
至 窗口 右 侧 边缘 。 

(4) 选中 第 1 帧 与 最 后 一 帧 ,然后 选择 【插入 了 工时 间 轴 了 区 创建 补 间 动 画 】 命 令 制作 出 两 
帧 之 间 运 动 的 动画 ,如 图 10. 20 所 示 。 
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图 10.19 将 元 件 应 用 到 主场 景 中 图 10.20 制作 出 两 帧 之 间 的 动画 


上 述 的 实例 只 是 一 个 简单 的 元 件 应 用 ,怎样 让 元 件 功能 发 挥 出 惊人 效果 ,还 需 在 实践 中 
体验 。 


10. 3.4 利用 遮 罩 层 制作 动画 


Flash 中 有 一 个 遮 罩 层 的 功能 ,使 用 它 可 以 制作 出 探照灯 效果 和 流动 效果 。 遮 罩 层 就 好 
像 是 一 块 谈 盖 物体 的 木板 ,在 木板 上 挖 一 个 洞 就 可 以 透 过 这 个 洞 看 到 下 面 的 物体 。 整 个 谈 
畦 层 是 不 透明 的 , 当 在 遮 罩 层 中 面 出 一 个 形状 ,就 好 像 在 木板 中 挖 出 一 个 洞 一 样 , 透 过 它 可 
以 看 到 下 面 层 中 的 对 象 。 下 面 用 一 个 简单 的 例子 来 学 习 遮 畦 层 的 功能 。 

该 实例 实现 的 是 探照灯 文字 效果 , 当 探照灯 由 左 到 右 照射 时 ,被 照 到 的 地 方 出 现 鲜亮 的 
色彩 ,浏览 效果 如 图 10. 21 所 示 。 具 体操 作 步 骤 如 下 。 


队 flash 秋 下 特 效 回回 因 
文件 @， 视 图 中， 控制 调式) 





图 10.21 探照灯 文字 效果 


(1) 启动 Flash Professional 8 ,新 建 一 个 文件 ,设置 影片 大 小 为 400pxX120px, 背 景 


为 白色 。 
(2) 新 建 一 图 形 元 件 , 命 名 为 “mask”, 选 取 文本 工具 ,在 【属性 了 面板 中 设置 字体 为 “ 黑 
体 ”, 大 小 为 50, 加 粗 显 示 。 然 后 在 工作 区 中 输入 文本 “探照灯 文字 效果 ”, 如 


图 10. 22 所 示 。 

(3) 新 建 一 图 形 元 件 *meng”, 在 第 1 帧 处 插入 一 关键 帧 ,选择 椭圆 工具 ,设置 其 填充 色 
为 放射 渐变 ,边框 为 无 , 按 住 Shift 键 在 工作 区 中 绘制 一 正 圆 ,并 用 【 混 色 器 了 面板 和 
填充 变形 工具 茵 进行 调整 ,如 图 10. 23 所 示 。 
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图 10.22 文本 图 形 元 件 图 10.23 探照灯 图 形 元 件 


(4) 返回 主场 景 ,命名 图 层 1 为 “背景 " 层 。 在 第 1 帧 处 插入 一 关键 帧 ,选取 矩形 工具 , 设 
置 其 轮廓 颜色 为 黑色 ,填充 色 为 直线 渐变 ,从 浅 蓝 色 到 深蓝 色 不 断 变 化 ,并 使 其 充 
满 画布 ,如 图 10. 24 所 示 。 

(5) 新 建 图 层 , 命 名 为 “背景 文字 ”, 然 后 把 文字 图 形 元 件 拖 入 工作 区 域 。 选 中 该 实例 ， 
在 [属性] 面板 中 设置 实例 颜色 为 深蓝 色 。 再 拖 入 一 个 “背景 文字 ”实例 ,把 它 置 于 
上 面 文字 的 下 面 ,并 向 右 下 错开 2 像素 ,形成 立体 效果 ,如 图 10. 25 所 示 。 
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图 10.24 制作 背景 效果 图 10.25 制作 背景 文字 效果 


(6) 新 增加 一 个 层 , 命 名 为 “球形 探照灯 ”, 拖 入 制作 好 的 球形 图 形 元 件 ,并 创建 简单 的 

移动 动画 ,如 图 10. 24 所 示 。 

新 增加 一 个 层 , 命 名 为 “ 遮 罩 文字 ”, 拖 和 人 制作 好 的 文字 图 形 元 件 。 在 【属性 了 面板 中 

修改 文字 实例 的 显示 颜色 为 亮 黄色 ,在 【变形 3 面板 中 把 高 增加 为 110% 显 示 , 如 图 

10. 26 所 示 。 

(8) 新 增加 * 遮 音 层 " 层 , 拖 入 meng 图 形 元 件 ,模仿 “球形 探照灯 ” 层 .创建 简单 的 移动 动 
画 , 如 图 10. 27 所 示 。 

(9) 然后 把 该 层 设置 为 遮 畦 层 , 方 法 是 在 右键 菜单 中 选择 【 谈 畦 层 ] 命 令 即 可 ,其 下 面 的 
图 层 “ 忆 畦 文字 ”自动 变 成 被 遮 罩 层 ,再 把 “球形 探 照 拖 动 到 * 咕 单 文字” 下 面 ， 
也 自动 把 该 层 变 为 被 遮 畦 层 ,如 图 10. 27 所 示 。 这 样 就 可 以 实现 一 个 图 层 同 时 遮 罩 
两 个 图 层 的 效果 。 





< 








提示 
要 将 一 个 层 变 为 遮 单 层 , 也 可 以 在 选中 层 后 ,选择 【修改 】 人 区 时间 轴 了 人 区 层 属性 】 命 令 ， 
打开 【图 层 属 性 了 对话 框 ,在 其 中 选中 人 遮 单 层 】 单 选 按钮 ,然后 单 击 【确定 了 按钮 。 
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在 制作 过 程 ,应 该 注意 各 层 中 对 象 的 纵向 居中 对 齐 , 方 法 是 利用 [对 齐 ] 面 板 进行 操 
作 。 还 要 注意 “这 曙 层 ” 层 和 “球形 探照灯 ” 层 中 球形 在 任何 位 置 都 应 该 保持 相同 。 


如 果 取 消 遗 罩 层 和 被 遗 罩 层 的 锁定 , 遗 罩 效果 就 会 消失 。 


10.4 输出 和 应 用 Flash 动画 


与 制作 网 页 图 像 一 样 ,制作 完成 的 网 页 动画 最 终 目的 是 为 了 应 用 于 网 页 中 。 所 以 ,同样 
也 需要 考虑 动画 文件 不 能 过 于 庞大 ,以 避免 因 文 件 过 大 而 无 法 在 网 络 上 下 载 。 一 般 来 说 ,在 
网 页 上 使 用 的 动画 都 不 会 太 复杂 。 此 外 ,在 制作 动画 时 ,应 注意 图 像 的 处 理 ,尤其 是 从 外 部 
导入 的 图 像 , 更 应 注意 它 的 文件 大 小 。 如 果 太 大 , 则 必须 先 用 Fireworks 或 其 他 图 形 处 理 软 
件 最 优化 图 像 ,再 应 用 到 动画 中 ,以 减少 动画 的 体积 。 本 节 就 介绍 两 个 问题 , 即 动画 的 输出 
和 应 用 。 


10.4.1 输出 动画 


动画 制作 完成 后 ,必须 将 其 输出 为 网 页 动画 ,也 就 是 网 页 能 够 认识 的 动画 格式 , 才 可 应 
用 到 Dreamweaver 8 中 。 输 出 动画 的 步骤 如 下 。 
(1) 在 Flash 窗口 中 选择 [文件 了 民 导 出 了 民 导 出 影片 命令 。 
(2) 打开 【导出 影片 3 对话 框 ,如 图 10. 28 所 示 。 在 对 话 框 中 设置 保存 位 置 、 文 件 名 和 文 
件 类 型 ,默认 的 保存 类 型 为 . swf 格式 的 Flash 动画 。 接 受 默认 设置 ,然后 单 击 【 保 
存 ] 按 钮 。 


音 


注意 

在 【导出 影片 〗 对 话 框 中 可 以 选择 多 种 动画 格式 ,如 AVI、 SWF .GIF 和 MOV 等 ,如 果 

采用 Flash 默认 的 SWF 格式 输出 , 则 在 浏览 带 有 这 种 格式 的 网 页 时 ,只 有 安装 了 Flash 动 
画 播放 器 才能 播放 。 所 以 ,为 了 方便 浏览 者 浏览 ,最 好 选用 GIF 格式 。 


(3) 弹出 如 图 10. 29 所 示 的 【导出 Flash Player] 对 话 框 , 在 其 中 设置 如 下 各 项 参数 。 
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图 10. 28 【导出 影片 ] 对 话 框 图 10.29 【导出 Flash Player] 对 话 杠 


版 本 :在 该 下 拉 列 表 框 中 可 以 选择 输出 动画 的 版 本 。 默 认 设置 为 Flash Player 

8。 注 意 ,高 版 本 的 文件 不 能 用 在 低 版 本 的 应 用 程序 中 。 

加 载 顺 序 :设置 第 1 帧 动画 的 载 人 方式 ,以 便于 Flash 决定 第 1 帧 动画 首先 出 现 

的 位 置 。 该 设置 只 适用 于 动画 的 第 1 帧 。 可 从 下 拉 框 中 决定 打开 动画 时 的 显 

示 次 序 。 选 择 * 自 下 而 上 ?会 从 下 方 的 图 层 开 始 显示 ;而 选择 * 自 上 而 下 ” 则 会 从 

顶部 的 图 层 开始 显示 。 

AS 版 本 :设置 脚 ActionScript 本 的 版 本 号 ,最 新 版 本 为 ActionScript 2. 0。 

选项 :设置 动画 的 输出 选项 ,具体 如 下 。 

。 生成 大 小 报告 :选中 此 复 选 框 , 可 创建 一 个 文本 文件 ,记录 下 最 终 输出 动画 
的 各 部 分 所 占用 的 体积 大 小 ,以 作为 缩小 文件 体积 的 参考 。 

* 防止 导入 :选中 此 复 选 框 ,可 防止 应 用 到 网 页 中 的 动画 文件 被 他 人 从 网 上 下 
载 到 Flash 程序 中 进行 编辑 。 

9 省 略 trace 动作 :选中 此 复 选 框 ,可 设置 Flash 忽略 当前 动画 中 的 [跟踪 】 
命令 。 

。 ”允许 调试 :选中 此 复 选 框 , 则 允许 别人 对 此 Flash 程序 进行 调试 。 

。 ”压缩 影片 :选中 此 复 选 框 , 则 对 Flash 程序 进行 压缩 , 减 小 文件 大 小 。 

4 为 Flash Player 6 r65 优化 :运用 Flash Player 6 或 更 早 的 版 本 。 

密码 :当选 中 [防止 导入 】 复 选 框 后 ,在 此 输入 密码 ,生成 的 电影 就 可 在 Flash 中 

通过 [文件 ]I【 导 入 3 命令 来 调用 。 

JPEG 品质 :该 选项 设置 将 动画 中 的 所 有 位 图 保存 为 一 定 压缩 率 的 JPEG 文件 。 

音频 流 和 音频 事件 :用 这 两 个 选项 分 别 设置 输出 的 流 式 音频 和 事件 音频 的 压缩 

格式 和 传输 速度 。 

覆盖 声音 设置 :选中 此 复 选 框 ,会 使 该 对 话 框 中 的 设置 覆盖 掉 【 声 音 设 置 ] 对 话 


框 中 对 单个 音频 的 属性 设置 。 

@ 导出 设备 声音 :这 是 Flash Professional 8 所 特有 的 属性 ,是 专门 为 移动 设备 播 
放 的 动画 而 开发 的 。 

。 本 地 回放 安全 性 :设置 SWF 动画 在 本 地 计算 机 上 播放 的 安全 设置 ,避免 SWF 
对 本 地 计算 机 的 危险 操作 。 选 择 【 只 访问 本 地 文件 ] 选 项 , 则 SWF 动画 只 能 够 
阅读 本 地 文件 ,而 不 能 进行 写 操作 ;选择 [只 访问 网 络 】 选 项 , 则 SWF 动画 具备 
网 络 功能 ,如 超 链接 访问 远 程 文件 等 。 

(4) 最 后 , 单 击 【 确 定 ] 按 钮 就 可 以 将 动画 输出 。 
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10. 4.2 在 Dreamweaver 8 中 应 用 Flash 动画 


制作 Flash 动画 是 一 个 复杂 的 过 程 , 而 在 Dreamweaver 8 中 使 用 Flash 动画 则 非常 简 
单 , 因 为 Flash 与 Dreamweaver 均 是 Macromedia 公司 的 产品 ,它们 之 间 组 合 得 非常 完美 。 
当 Flash 动画 插入 到 Dreamweaver 8 中 时 ,Dreamweaver 8 会 读 取 Flash 动画 的 相关 属性 , 获 
取 动 画 的 大 小 等 信息 ,并 会 自动 加 上 兼容 于 Internet Explorer 及 Netscape 的 标签 码 。 此 外 ， 
还 可 以 设置 动画 的 其 他 属性 ,如 可 设置 源 文 件 位 置 .动画 的 品质 以 及 是 否 循环 播放 等 参数 。 

要 插入 一 个 Flash 对 象 , 先 启动 Dreamweaver 8 软件 ,再 进行 如 下 操作 。 

(1) 在 网 页 中 确定 动画 插入 位 置 ,再 在 工具 箱 中 单 击 Flash 按钮 全 ,如 图 10. 30 所 示 。 

(2) 打开 如 图 10. 31 所 示 的 【选择 文件 3 对 话 框 。 在 对 话 框 中 找到 Flash 动画 保存 的 位 

置 ,然后 选中 要 插入 的 动画 文件 ,比如 选中 * 蒙 版 运用 . swf" 文 件 , 单 击 【确定 了 按钮 。 

(3) 按照 上 述 操作 完成 Flash 动画 的 插入 。 完 成 插入 后 ,Dreamweaver 8 会 自动 读 出 该 

动画 文件 的 大 小 及 其 他 参数 设置 ,如 图 10. 32 所 示 。 为 了 让 动画 能 够 在 浏览 器 中 正 
常 播放 ,可 以 在 插入 Flash 动画 后 , 先 按 下 Fl12 键 启动 浏览 器 软件 测试 一 下 动画 是 
否 播放 正常 。 4 





插入 Flash 动 画 : 














10.30 在 Dreamweaver 8 中 导入 Flash 图 10.31 【选择 文件 ] 对 话 框 





新 编 网 页 制作 入 门 与 提高 




















图 10.32 在 Dreamweaver 8 中 插入 Flash 动画 后 的 效果 





提示 
也 可 以 直接 在 Dreamweaver 8 中 预览 播放 Flash 动画 ,在 选中 动画 对 象 后 ,在 其 【 属 
性 】 面 板 中 单 击 区 _ 玫 让 ] 按 钮 即 可 。 但 要 注意 ,只 有 安装 了 Flash 动画 播放 器 才能 播放 。 


对 已 插入 到 Dreamweaver 8 中 的 Flash 动画 对 象 ,可 以 对 其 重新 设置 各 项 属性 ,如 
图 10. 33 所 示 。 





要 在 Dreamweaver 8 中 显示 Flash 动画 对 象 的 [属性 面板 ,选择 [窗口 II【 属 性 命令 
或 按 Ctrl 十 F3 组 合 键 。 


设置 对 象 的 宽 设置 对 象 源 文 设置 对 象 在 水 平方 
与 高 件 位 置 向 上 的 对 齐 方式 


二 属性 


ash 4K 
届时 银 名 你 全 


回 循环 
设置 是 否 循环 播 自动 吐 训 











放 和 自动 播放 | 
设置 对 象 水 平 设置 动画 播放 质 设置 对 象 青 景 颜色 
和 垂直 边 距 。 量 与 缩放 比例 入 流动 面 流年 对 关 
其 他 参数 


图 10.33 ”Flash 动画 [属性 ] 面 板 








本 章 内 容 包括 : 

全 认识 脚本 语言 

全 ActionScript 基础 知识 

全 使 用 [动作 了 面板 

全 ActionScript 编写 的 一 般 方法 





本 章 要 点 : 


ActionScript 是 Fash 的 脚本 语言 ,可 以 控制 Fash 动 画 中 的 关键 帧 .按钮 或 影片 剪辑 。 使 用 
ActionScript 不 仅 可 以 动态 控制 动画 播放 ,而 且 还 能 够 完成 各 种 运算 .甚至 以 各 种 方式 获取 用 户 
的 动作 ， 并 E 即 时 做 出 反应 ， i trl j 户 事件 .大 大 增强 了 Flash 动画 的 交互 

实 阿 
































11.1 什么 是 ActionScript 


ActionScript 是 Flash 中 内 建 的 一 种 只 在 Flash 中 使 用 的 脚本 编程 语言 ,用 于 控制 Flash 
动画 ,为 Flash 动画 添加 交互 性 和 创建 复杂 的 Flash 应 用 程序 。 

什么 是 脚本 编程 语言 ?所 谓 脚本 (Script) 在 英文 中 翻译 为 手稿 的 意思 。 用 脚本 编程 语 
言 编写 的 程序 在 任何 时 候 都 是 可 以 阅读 的 。 而 对 于 可 编译 的 编程 语言 ,例如 Visual C++、 
Delphi、Visual Basic 而 言 , 尽 管 这 些 编程 语言 在 程序 开发 期 间 其 程序 代码 也 都 是 可 读 的 ,但 
用 这 些 编程 语言 开发 的 程序 必须 经 过 编译 才能 执行 ,一 旦 被 编译 ,生成 的 可 执行 文件 就 都 是 
不 可 读 的 , 变 成 只 有 CPU 才能 明白 的 机 器 编码 了 。 

用 脚本 编程 语言 编写 好 程序 后 ,不 需要 进行 编译 。 但 计算 机 只 能 理解 机 器 编码 ,那么 用 
脚本 语言 编写 的 程序 代码 如 何 才能 让 计算 机 理解 呢 ? 这 就 需要 一 个 脚本 解释 程序 ,这 个 脚 
本 解释 程序 读 取 用 脚本 语言 编写 的 程序 ,并 一 句 句 地 把 这 些 脚 本 程序 代码 翻译 成 计算 机 能 
够 理解 的 机 器 码 , 这 个 工作 是 在 程序 执行 时 进行 的 ,由 于 多 了 这 样 一 个 解释 的 过 程 ,用 脚本 
语言 编写 的 程序 运行 起 来 会 比 编译 过 的 程序 慢 得 多 。 

ActionScript 当然 也 有 它 的 解释 程序 ,这 种 解释 程序 以 各 种 形式 存在 Flash Player 
(Flash 播放 器 ) 中 ,如 独立 的 播放 器 .插件 形式 和 ActiveX 控件 形式 。 

虽然 能 力 和 速度 不 及 那些 被 编译 的 编程 语言 ,但 脚本 编程 语言 仍然 是 相当 强大 的 ,例如 
使 用 Perl 和 PHP 脚本 编程 语言 完全 可 以 开发 出 大 型 的 应 用 软件 。 

脚本 语言 同 标记 语言 也 有 区 别 , 例 如 ,HTML 和 XML 都 是 标记 语言 ,但 它们 只 能 对 网 
页 文本 格式 进行 描述 。 

作为 脚本 语言 ,一般 都 比较 容易 学 习 ,ActionScript 更 是 如 此 ,只 要 掌握 一 点 ActionS- 
cript 基础 知识 ,就 可 以 解决 实际 应 用 中 绝 大 多 数 的 问题 。 


11.2 ActionScript 基础 


任何 一 种 编程 语言 ,不管 是 脚本 语言 还 是 可 编译 的 编程 语言 ,基本 的 语法 和 概念 往往 都 
是 共通 的 ,例如 都 有 变量 .运算 符 、 表 达 式 .关键 字 ( 语 句 、 命 令 )、 函 数 ,以 及 用 于 控制 程序 流 
程 的 条 件 和 循环 结构 等 。ActionScript 也 具备 这 些 编程 概念 。 
11.2.1 ActionScript 常用 术语 


要 有 效 地 使 用 ActionScript 脚本 语言 ,了解 其 特定 的 术语 和 规范 是 必须 的 。 


1. 对 象 (Object) 


作为 以 对 象 为 核心 的 编程 语言 ,在 Flash 中 ,所 有 图 形 图 像 .声音 文字、 视频 等 都 可 以 视 
为 对 象 。 对 象 都 有 自己 的 属性 方法 和 事件 ,每 个 对 象 都 有 名 称 ,以便 控 制 。 


2. 属性 (Properties) 
反映 对 象 的 性 质 、 特 征 或 变化 。 例 如 ，xmouse 返回 鼠标 的 x 坐标 位 置 。 
3. 方法 (Method) 


方法 就 是 某 个 对 象 的 私有 函数 ,被 对 象 所 使 用 ,完成 对 象 的 特定 功能 。 例 如 ,下 面 代码 
调用 了 按钮 的 gotoAndPlay() 方 法 实现 跳 转 到 当前 场景 的 第 5 帧 进行 播放 。 


on (release) { 
gotoandPlay(5)7 
} 


4. 动作 (Action) 


也 称 指令 ,说 明 程 序 要 执行 什么 命令 。 例 如 ,gotoAndStop 动作 就 可 以 将 播放 指针 跳 转 
到 指定 的 某 一 帧 或 帧 标记 处 并 停止 播放 。 


5. 事件 (Events) 


在 影片 播放 过 程 中 发 生 的 动作 或 某 些 条 件 满足 时 的 交互 响应 。 例 如 ,影片 载 入 、 播 放 指 
针 到 达 某 一 帧 单 击 按钮 或 影片 实例 . 敲 击 键盘 上 的 某 一 个 键 等 ,这 些 都 会 产生 某 一 事件 。 

6. 实例 (Instances) 

也 称 为 实体 ,实例 就 是 把 [ 库 ] 中 的 元 件 引 入 到 舞台 上 的 具体 对 象 。 

7. 参数 (Arguments) 

用 于 传递 值 的 变量 ,在 函数 中 将 参数 当成 具体 的 值 来 执行 。 例 如 : 

Funtion show (name, score) { 


ShowMC.display = name; 
showMC.score = score; 


} 
这 里 ,括号 中 的 name、score 都 是 参数 (也 是 变量 )。 
8. 常量 (Constants) 

常量 即 不 会 改变 的 量 , 它 对 于 值 的 比较 非常 有 用 。 


9. 变量 (Variables) 


变量 就 是 可 以 改变 的 量 。 变 量 可 以 被 创建 ,修改 和 更 新 。 例 如 , 设 定 var01 为 一 个 变量 ， 
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这 个 变量 保存 有 字符 串 “How are you?”, 定 义 变量 var01: 
var0l = "How are you? " 
再 将 这 个 变量 的 数据 赋 给 另 一 个 变量 var02: 
Var02 = var0l; 
这 样 变 量 var02 的 值 也 是 字符 串 “How are you?” 了 。 
每 个 变量 都 有 自己 的 生命 周期 或 说 有 效 范围 (Scope) ,在 有 效 范围 内 可 以 存 取 和 使 用 该 
变量 ,出 了 有 效 范围 就 找 不 到 该 变量 了 (或 说 该 变量 的 生命 已 经 结束 ) 。 


10. 函数 (Functions) 


函数 简单 地 说 就 是 代码 块 。 将 实现 某 一 种 能 执行 特定 功能 的 代码 放 在 一 起 用 一 种 特殊 
的 方式 定义 ,封装 ,最 后 命名 这 一 段 代码 为 函数 。 函 数 可 以 在 程序 中 重复 地 使 用 ,这 样 就 大 
大 减少 了 代码 量 , 增 加 了 效率 ,同时 也 减少 了 因为 代码 的 书写 引起 的 错误 。 

同时 ,通过 传递 参数 的 办 法 ,可 以 让 函数 处 理 各 个 不 同 的 数值 ,从 而 返回 不 同 的 值 。 例 
如 :getProperty 函数 就 可 以 使 用 影片 剪辑 的 实例 名 称 和 属性 名 称 , 返 回 对 象 的 属性 值 ; get- 
Version 函数 可 以 返回 当前 播放 电影 的 Flash 播放 器 的 版 本 号 。 


11. 关键 字 (Keywords) 


ActionScript 语言 保留 了 一 些 单词 作为 特殊 用 途 , 用 户 不 能 使 用 这 些 关键 词 作为 变量 、 
函数 或 标签 的 名 字 。 下 面 是 ActionScript 的 关键 字 , 如 表 11. 1 所 示 。 


表 11.1 ”ActionScript 关键 字 























Break else for with 
Case true function return 

Continue void in new 

Default false if this 
delete while var typeof 





12. 表达 式 (Expressions) 


表达 式 是 Flash 可 以 取得 返回 值 的 任何 语句 。 利 用 运算 符 和 值 .调用 函数 等 方法 创建 表 
达 式 。 如 果 在 【动作 了 面板 的 [脚本 助手 模式 下 编写 表达 式 , 则 确认 已 经 选中 了 [表达 式 了 复 
选 框 ,否则 在 参数 框 中 包含 的 就 只 是 文本 字符 串 , 如 图 11. 1 所 示 。 














目 国 屋 1 :1 而 
全 二 FSCSCTER [ 吉 关 要 表达 式 .J 





图 11.1 【脚本 助手 ] 模 式 


13. 类 (Class) 


一 系列 相互 之 间 有 关联 的 数据 的 集合 称 为 一 个 类 ,可 以 使 用 类 来 创建 新 的 对 象 ,如 果 定 
义 一 个 新 的 对 象 类 ,需要 事先 创建 一 个 构造 器 函数 。 


14. 构造 器 (Constructor) 


用 于 定义 一 个 类 的 相关 特性 和 方法 的 函数 。 例 如 ,要 定义 一 个 圆 类 ,只 要 在 构造 器 函数 
中 定义 其 圆心 的 坐标 和 圆 的 半径 即 可 ,代码 如 下 : 
function Circle (x,y,radius){ 
this. x= x; 
this. y= y; 
this. radius= radius; 


} 


15. 标签 (Label) 


标签 是 专门 用 于 标识 一 个 帧 的 ,合理 利用 标签 可 以 大 大 提高 程序 的 可 阅读 性 和 可 维护 
性 ,不 仅 是 利于 掌握 动画 流程 ,而 且 利于 程序 的 结构 化 和 代码 重用 。 

利用 标签 来 控制 动画 流 要 比 用 帧 编号 好 得 多 ,而 用 标签 来 实现 一 个 函数 的 定义 和 调用 
也 是 相当 简洁 明了 的 ,但 是 ,用 一 个 标签 结合 一 个 帧 定义 函数 不 能 够 传递 参数 ,唯一 的 方法 





11. 2.2 ActionSeript 基本 语法 


ActionScript 有 自己 的 基本 语法 ,掌握 基本 的 语法 可 以 很 方便 地 了 解 ActionScript 编程 
规则 。 
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1. 点 语法 


通过 点 符号 (. ) 指 向 一 个 对 象 (通常 是 对 MovieClip) 的 某 一 个 属性 或 方法 。 例 如 ,如 果 
有 一 个 影片 剪辑 的 实例 名 称 是 “fish”，x 和 _y 表示 这 个 实例 在 场景 中 的 x 坐标 和 y 坐标 ,就 
可 以 用 如 下 语句 得 到 它 的 x 位 置 和 y 位 置 。 


_root.x= root.fish. x; 
_root.y= root.fish. y; 


其 中 *_root. "表示 主 时 间 轴 的 绝对 路 径 ,“_parent. ”表示 父 场景 ( 即 上 一 级 场景 ) 的 相对 路 径 。 


2. 大 括号 


用 大 括号 ({ )) 可 把 程序 分 成 一 段 一 段 的 模块 。 可 以 把 括 统 中 的 代码 看 作 是 一 句 表达 
式 。 例 如 : 


if (count> 18) { 
count = 1; 


} 
大 括号 内 { ) 的 “count= 二 1;” 就 是 一 句 表达 式 。 


3. 括号 
用 于 包含 函数 的 参数 ,例如 : 


on (press) { 
startDrag (stars, true); 
} 


表示 当 按 钮 被 按 下 时 ,影片 剪辑 实例 可 以 被 鼠标 拖 动 。 这 里 括号 ( ) 中 “stars”、“true” 都 是 
参数 。 
又 如 : 


on (press) { 
_root .dh.stop(); 
_root .pd.stop(); 
} 


代码 stop 后 的 空 括号 ( ) 表 示 没 有 任何 参数 。 另 外 ,还 可 以 用 于 重 置 表达 式 运算 的 优先 级 ， 
如 :Ca 十 3) x 4。 
4. 分 号 


ActionScript 以 分 号 作为 语句 的 结束 。 例 如 ,下 面 各 语句 就 是 以 分 号 结束 的 。 


itncock W xscale; 
itncock H= yscale; 


当然 ,如 果 用 户 忽略 了 分 号 ,Flash 8 也 能 正确 编译 脚本 。 不 过 建议 还 是 应 该 使 用 分 号 。 


5. 加 号 
ActionScript 以 逗号 表示 命令 之 间 的 分 隔 符 号 。 例 如 ,上 面 关于 分 号 的 实例 语句 也 可 以 
用 逗号 分 隔 后 写 在 同一 行 。 


itncock W= xscale, itncock H= yscale; 


6. 批注 


在 ActionScript 中 可 以 使 用 “//” 符 号 给 脚本 添加 批注 信息 ,使 代码 更 容易 阅读 。 凡 是 批 
注 符号 之 后 的 内 容 ,Flash 8 在 播放 时 并 不 执行 。 例 如 ,下 面 的 语句 后 面 就 存在 批注 ,说 明 该 
语句 的 动作 含义 。 

cock.stop(); // 主 时 间 轴 上 影片 剪辑 cock 停 止 运动 


7. 关键 字 


每 种 编程 语言 都 有 自己 特定 的 关键 字 , 用 于 执行 常用 命令 ,这 些 关 键 字 一 般 都 是 固定 格 
式 的 英文 单词 ,用 户 不 可 改写 、 错 写 或 借用 ,具体 说 明 可 参见 上 节 介 绍 。 


8. 代码 大 小 写 


ActionScript 对 于 字母 的 大 小 写 没 有 Javascript 那么 敏感 ,但 对 于 关键 字 必 须 遵循 大 小 
写 规则 。 一 般 建议 用 户 养 成 区 分 大 小 写 的 习惯 ,避免 编写 中 出 现 错误 。 


11.2.3 数据 类 型 


数据 类 型 说 明 一 个 变量 或 ActionSeript 元 素 可 以 存储 的 信息 种 类 。 在 Flash 8 的 
ActionScript 中 有 两 种 数据 类 型 :原始 数据 类 型 (Primitive) 和 引用 数据 类 型 (Reference) 。 
e 原始 数据 类 型 ,如 字符 串 .数值 .逻辑 值 ,有 一 个 常数 值 。 因 此 ,可 以 存储 它们 所 代表 
的 元 素 的 实际 值 。 
e@ 引用 数据 类 型 ,如 影片 剪辑 和 对 象 , 拥 有 可 以 改变 的 值 。 因 此 ,包含 了 对 该 元 素 的 实 
际 值 的 引用 。 
存储 原始 数据 类 型 数据 的 变量 行为 在 某 些 情况 下 与 存储 引用 数据 类 型 数据 的 变量 不 
同 。 下 面 介绍 各 种 数据 类 型 。 


1. 字符 串 (String) 


字符 串 是 由 字母 ,数字 或 标点 符号 等 组 成 的 序列 。 在 ActionScript 中 输入 字符 串 , 使 用 
单 引号 或 双 引 号 括 住 。 字 符 串 作为 字符 来 处 理 而 不 是 作为 变量 来 处 理 。 例 如 ,在 下 面 的 语 
句 中 ,“L7” 是 一 个 字符 串 : 


favoriteBand = "Li"™; 
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可 以 用 加 号 (十 ) 运 算 符 连接 两 个 字符 串 。ActionScript 把 字符 串 前 后 的 空格 作为 字符 
串 的 一 部 分 来 处 理 , 例 如 ; 

greeting = "Welcome," + firstName; 

尽管 ActionScript 对 变量 、 实 例 名 和 帧 标签 的 引用 不 区 分 大 小 写 ,但 字符 串 是 区 分 大 小 
写 的 。 例 如 ,下 面 的 两 个 语句 把 不 同 的 文本 放 和 指定 的 文本 域 变 量 中 ,因为 “Hello” 和 
“HELLO” 是 字符 串 。 

invoice.display = "Hello";invoice.display = "HELLO™"; 

要 在 字符 串 中 包含 引号 ,可 在 它 前 面 加 上 反 斜 杠 八 ) ,这 称 为 字符 转 义 。 在 ActionScript 
中 ,还 有 一 些 其 他 的 字符 需要 使 用 特殊 转 义 序列 来 表示 ,如 表 11. 2 所 示 。 
表 11.2 字符 转 义 列表 






































转 义 序列 字 符 
\b 退 格 符 (ASCII 8) 
¥f 换 页 符 (ASCII 12) 
\n 换行 符 (ASCII 10) 
\r 回 车 符 (ASCII 13) 
制 表 符 (ASCII 9) 
六 双 引 号 
bY 单 引号 
% 反 斜 杠 
\000~\377 八进制 字 节 
\x00~\xFF 十 六 进 制 字 节 
\u0000~\uFFFF 十 六 进 制 双 字 节 编 码 字符 


2. 数值 (Number) 


数值 数据 类 型 是 一 个 双 精 度 浮 点 数 。 可 用 数学 运算 符 加 (十 )、 减 (一 )、 乘 (x )、 除 (、)、 
取 模 (%)、 递 增 (十 十 )、 递 减 (一 一 ) 处 理 数值 。 也 可 以 使 用 预定 义 的 Math( 数 学 ) 对 象 的 方法 
来 处 理 数值 。 例 如 : 


Math.sqrt (100); 


表示 使 用 sqrt( 平 方 根 ) 方 法 来 返回 数值 100 的 平方 根 。 
3. 逻辑 值 (Boolean) 


逻辑 值 是 true( 真 ) 或 false( 假 )。 需 要 时 ,ActionScript 也 把 true 和 false 转换 为 1 和 0。 
逻辑 值 与 逻辑 运算 符 一 起 ,常常 被 用 在 控制 脚本 流动 的 比较 语句 中 。 例 如 : 


onClipEvent (enterFrame) { 
6 . 


if ((userName = = true) && (password = = true)){ 
play(); 


} 
} 


上 面 代码 表示 如 果 password 的 值 为 true, 则 播放 动画 。 
4. 对 象 (Object) 


对 象 是 属性 的 集合 。 每 个 属性 都 有 名 称 和 值 。 属 性 值 可 以 是 任何 Flash 数据 类 型 ,甚至 
可 以 是 对 象 数据 类 型 。 这 样 就 可 以 把 一 个 对 象 谷 套 在 另 一 个 对 象 之 中 。 要 指定 对 象 和 它们 
的 属性 ,可 以 使 用 点 运算 符 。 例 如 : 

employee.weeklyStats .hoursWorked 
上 面 代码 中 ,hoursWorked 是 weeklyStats 的 属性 ,而 weeklyStats 又 是 employee 的 属性 。 

可 以 使 用 ActionScript 的 预定 义 对 象 访问 和 处 理 特定 种 类 的 信息 。 例 如 ,Math( 数 学 ) 
对 象 拥有 一 些 方法 ,可 以 对 传递 给 它 的 数值 执行 数学 运算 。 下 例 使 用 了 数学 对 象 的 sqrt 
方法 : 

squareRoot = Math.sqrt (100); 

ActionScript 的 MovieClip( 影 片 剪 辑 ) 对 象 拥有 一 些 方法 ,使 用 这 些 方法 可 以 控制 编辑 
区 中 影片 剪辑 实例 。 下 例 使 用 了 影片 剪辑 对 象 的 play 和 nextFrame 方法 : 


mcInstanceName .play(); 
mc2InstanceName .nextFrame (); 


ActionScript 允许 用 户 创建 自己 的 对 象 。 这 样 用 户 就 可 以 在 自己 创建 的 动画 中 组 织 信 
息 。 当 用 ActionScript 给 动画 添加 交互 性 时 ,可 能 需要 很 多 不 同 的 信息 。 例 如 ,可 能 需要 用 
户 名 ,一 个 球 的 速度 、 购 物 车 中 物品 的 名 称 、 载 入 的 帧 数 、 用 户 的 邮 区 代码 和 最 后 的 按键 等 
等 。 创 建 一 个 自 定义 对 象 ,就 可 以 把 这 些 信息 分 为 组 。 


5. 影片 剪辑 (MovieClip) 


影片 剪辑 是 一 种 元 件 , 这 种 元 件 可 以 在 Flas 中 播放 一 个 动画 片段 。 它 是 与 元 件 有 关 的 
唯一 一 种 数据 类 型 。 

有 了 影片 剪辑 数据 类 型 ,就 可 以 使 用 影片 剪辑 对 象 的 方法 控制 影片 剪辑 。 使 用 点 运算 
符 可 以 调用 影片 剪辑 的 方法 ,例如 : 


myClip.startDrag (true); ParentClip.childclip.getURL( "http://www.macromedia.com/support/" + 
product); 





11. 2.4 运算 符 


表达 式 是 可 以 取得 并 返回 值 的 任何 语句 ,可 以 通过 在 ActionScript 命令 的 基本 选项 框 中 
以 手工 输入 的 方式 来 编写 表达 式 , 也 可 以 使 用 从 【动作 了 面板 中 的 指令 集中 拖 放 的 方式 来 编 
写 表达 式 。 在 Flash 中 没有 脚本 编写 向 导 . 它 只 会 提供 在 Flash 中 有 效 的 运算 符 和 函数 
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目录 。 
ActionScript 中 的 表达 式 由 运算 符 、 变 量 组 成 。Flash 运算 符 的 用 法 与 Javascript 完全 相 

同 。 当 两 个 或 两 个 以 上 的 运算 符 在 同一 个 表达 式 中 被 使 用 时 ,一 些 运 算 符 与 其 他 运算 符 相 比 
具有 更 高 的 优先 级 。 例 如 , 带 “* ”的 运算 要 在 “十 "运算 之 前 执行 ,因为 乘法 运算 优先 级 高 于 
加 法 运算 。ActionScript 就 是 严格 遵循 这 个 优先 等 级 来 决定 先 执行 哪个 操作 ,后 执行 哪个 操 
作 的 。 
例如 ,在 下 面 的 程序 中 ,括号 里 面 的 内 容 先 执行 ,结果 是 32: 
n 一 (20 一 4) *2; 
而 在 下 面 的 程序 中 , 先 执行 乘法 运算 ,结果 是 几 : 
n 一 20 一 4x* 2; 


1. 算术 运算 符 


这 些 运 算 符 被 用 来 进行 一 般 的 加 减 , 乘 、. 除 和 其 他 数学 运算 。 算 术 运 算 符 如 表 11. 3 所 
示 , 它 们 仅 对 数字 类 型 的 数据 进行 操作 。 
表 11.3 算术 运算 符 列表 






































运算 符 说 明 示 例 
= 取 负 一 expression 
丰 加 expressionl] 十 expression2 
一 减 expressionl 一 expression2 
名 乘 expressionl * expression2 
天 除 expressionl / expression2 
expressionl % expression2 
% 求 余 
12%5—>2 
2. 逻辑 运算 符 
逻辑 运算 符 比较 的 是 逻辑 值 ,一 般 返 回 一 个 逻辑 值 (true 和 false) ,人 逻辑 运算 符 如 表 11. 4 
所 示 。 
表 11.4 逻辑 运算 符 列表 
运算 符 说 明 示 例 
! (not) 逻辑 非 ! expression 
&&. (Cand) 逻辑 与 expression] & & expression2 
11(or) 逻辑 或 expressionl | | expression2 











3. 字符 串 运算 符 
字符 串 运 算 符 用 来 声明 .连接 字符 串 , 或 将 一 个 字符 串 与 另 一 个 字符 串 或 表达 式 进 行 比 


较 ,字符 串 运算 符 如 表 11. 5 所 示 。 


表 11.5 字符 串 运 算 符 列表 





























运算 符 说 明 示 例 
9 引号 用 于 表示 字符 串 
expressionl add expression2 
add( 十 ) 字符 串 笃 加 
"1" add "2" —> "12" 
eq( 一 一 ) 字符 串 相等 expression] eq expression2 
pe(! 一 ) 字符 串 不 相等 expression] ne expression2 
expression] lt expression2 
lt(<) 字符 串 小 于 
"12" lt "2" —> true 
expression] gt expression2 
gt(>) 字符 串 大 于 
"2 et "1 = tu 
le(==) 字符 串 小 于 等 于 expressionl le expression2 
ge(>=) 字符 串 大 于 等 于 expression] ge expression2 


4. 比较 运算 符 


比较 运算 符 用 于 将 两 个 表达 式 进行 相互 比较 ,一 般 返 回 一 个 逻辑 值 (true 和 false) ,比较 


运算 符 如 表 11. 6 所 示 。 





表 11.6 比较 运算 符 列表 





























运算 符 说 明 示 例 
! =(<>) 不 相等 expressionl ! = expression2 
小 于 expressionl < expression2 
> 大 于 expressionl > expression2 
<= 小 于 或 等 于 expressionl] 一 一 expression2 
>= 大 于 或 等 于 expressionl > =expression2 
1 == 全 不 等 expressionl ! 一 一 expression2 
一 一 相等 expressionl 一 一 expression2 
一 一 一 全 等 expressionl! 一 一 expression2 











5. 按 位 运算 符 


按 位 运算 符 用 于 对 二 进 制 数值 进行 操作 , 按 位 运算 符 如 表 11. 7 所 示 。 
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表 11.7 按 位 运算 符 列表 
































运算 符 说 明 示 例 
Ss 按 位 取 反 一 expression 
按 位 1 一 之 0,0 一 盖 1 
expressionl &. expression2 
& 按 位 与 
按 位 11 一 之 1,10 一 0,01 一 0, 00 一 二 0 
expressionl | expression2 
按 位 或 
按 位 11 一 之 1,10 一 >>1,01 一 1, 00 一 >0 
expression] ~ expression2 
按 位 异 或 
按 位 11 一 之 0,10 一 >>1,01 一 >>1, 00 一 >0 
expression 一 一 num 
<< 按 位 左 移 
左 移 num 位 , 右 补 0 
expression >> num 
>> 按 位 算术 右 移 
右 移 num 位 , 左 补 符号 位 
expression >>> num 
>>> 按 位 逻辑 右 移 
右 移 num 位 , 左 补 0 


6. 赋值 运算 符 
赋值 运算 符 可 以 给 变量 赋值 ,赋值 运算 符 如 表 11. 8 所 示 。 





表 11.8 赋值 运算 符 列表 









































运算 符 说 明 示 例 
十 一 自 加 赋值 variable 十 一 expression 等 价 于 varaible 一 variable 十 expression 
= 自 减 赋值 variable 一 一 expression 等 价 于 varaible = variable 一 expression 
二 一 自 乘 赋值 variable * 一 expression 等 价 于 varaible 一 variable * expression 
/一 自 除 赋值 variable /二 expression 等 价 于 varaible = variable / expression 
%= 自 求 余 赋值 variable % 二 expression 等 价 于 varaible 二 variable % expression 
&= 自 按 位 与 赋值 variable & 二 expression 等 价 于 varaible 一 variable & expression 
| 一 自 按 位 或 赋值 variable | 二 expression 等 价 于 varaible == variable | expression 
一 自 按 位 异 或 赋值 variable -一 expression 等 价 于 varaible 一 variable ~ expression 

<<= 自 按 位 左 移 赋值 variable 一 一 二 num 等 价 于 varaible 一 variable 一 一 num 

>>= 自 按 位 算术 右 移 赋值 | variable 二 二 = num 等 价 于 varaible 一 variable 二 二 num 

二 >>>= | 自 按 位 逻辑 右 移 赋值 | variable 二 > 二 num 等 价 于 varaible 二 variable 之 之 > nun 





7. 其 他 运算 符 


其 他 运算 符 如 表 11. 9 所 示 。 


表 11.9 其 他 运算 符 列表 
































运算 符 说 明 示 例 
3 分 号 statement1; statement2 用 于 分 隔 同一 行内 的 两 个 语句 
逗号 expression1，expression2 用 于 在 一 个 语句 内 分 隔 两 个 表达 式 
点 运算 符 | obj_mc. member 用 于 连接 对 象 (影片 剪辑 ) 和 其 成 员 ( 属 性 ) 
typeof(expression) 返回 表达 式 的 值 的 类 型 (字符 串 表示 ) ,返回 类 型 为 
未 定义 "undefined" 
空 值 "null" 
数值 "number" 
typeof 获取 类 型 
字符 串 "string" 
对 象 "object" 
函数 "function" 
影片 剪辑 “movieclip" 
void 未 定义 值 | void(expression) 返回 未 定义 值 
expression] ? expression2 : expression3 
?: 定向 运算 符 
当 expressionl 的 值 为 true 时 取 expression2 ,否则 取 expression3 
才 二 自 加 variable 十 十 ,十 十 variable 相当 于 variable = variable 十 1 
ein 自 减 variable 一 一 ,一 一 variable 相当 于 variable 二 variable 一 1 
11.2.5 变量 


在 ActionScript 中 变量 不 需要 声明 ,但 是 ,声明 变量 是 良好 的 编程 风格 ,这 便于 掌握 一 个 
变量 的 生命 周期 ,明确 知道 某 一 个 变量 的 意义 ,有 利于 程序 的 调试 。 通 常 ,在 动画 的 第 一 帧 
就 已 经 声明 了 大 部 分 的 全 局 变量 并 为 它们 赋 子 了 初始 值 。 每 一 个 影片 剪辑 对 象 都 拥有 自己 





的 一 套 变量 ,而 且 不 同 影片 剪辑 对 象 中 的 变量 相互 独立 且 互 不 影响 。 
1. 变量 命名 


变量 名 需 符合 以 下 几 点 : 
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变量 名 必须 是 一 个 标识 符 ,不 能 包含 任何 特殊 符号 。 
变量 名 不 能 是 关键 字 及 布尔 值 (true 和 flase) 。 
变量 名 在 其 作用 域 中 唯一 。 


2. 变量 的 类 型 及 转换 


ActionScript 中 变量 可 以 保存 所 有 类 型 的 数据 ,变量 类 型 主要 包括 String (字符 串 )、 
Number( 数 值 )、Boolean( 布 尔 值 )、Object( 对 象 ) 和 MovieClip( 影 片 剪 辑 ) 。 

在 Flash 中 不 需要 显 式 的 声明 一 个 变量 的 类 型 , 当 变 量 被 赋值 的 时 候 , 它 的 类 型 被 动态 
的 确定 ， 

当然 ,也 可 以 把 赋值 语句 理解 为 变量 的 声明 语句 ,例如 : 

和 
上 面 的 表达 式 声明 了 一 个 x 变量 ,其 类 型 为 number 类 型 ,并且 x 的 值 为 3。 对 变量 x 的 赋值 
可 能 还 会 改变 它 的 数据 类 型 : 

x= "hello"; 

此 时 变量 x 将 从 number 类 型 改变 为 string 类 型 。 这 与 C 语言 等 其 他 高 级 语言 语法 不 同 ， 
Flash 赋值 语句 其 实 具 有 变量 声明 的 作用 。 

声明 了 却 没有 被 赋值 的 变量 类 型 被 称 为 无 类 型 变量 。 

在 特定 的 条 件 下 ,ActionScript 可 以 自动 将 变量 的 类 型 进行 转换 。 例 如 , 当 为 trace 语句 
传递 一 个 值 以 后 ,这 个 值 被 自动 转换 成 字符 串 类 型 输出 到 Output 窗口 中 。 在 表达 式 中 ， 
ActionScript 会 根据 需要 对 变量 进行 类 型 转换 ,例如 : 

"The number is "+ 7 
ActionScript 将 数字 7 自动 转换 成 字符 串 “7”, 并 将 它 添 加 在 前 面 字符 串 的 末尾 : 

"The number is 7" 

在 调试 脚本 的 时 候 , 需 要 确切 掌握 一 个 变量 的 数据 类 型 ,因为 数据 类 型 决定 了 变量 的 行 
为 ,ActionScript 中 提供 了 typeof 运算 符 ,用 于 确定 某 一 个 变量 的 类 型 : 

trace ( typeof ( aVariable )); 

另外 ,Flash 中 提供 了 两 个 类 型 转换 函数 。Number 函数 可 以 将 一 个 字符 串 转 换 成 数字 ， 
相应 的 ,String 函数 可 以 将 一 个 数字 转换 成 一 个 字符 串 ,它们 的 用 法 比较 简单 。 


3. 变量 的 作用 域 


ActionScript 中 有 局 部 变量 和 全 局 变量 之 分 ,全 局 变量 在 整个 动画 的 脚本 中 都 有 效 ,而 
局 部 变量 只 在 它 自己 的 作用 域内 有 效 。 声 明 局 部 变量 需要 用 到 var 语句 。 例 如 ,在 下 面 的 例 
子 中 ,i 是 一 个 局 部 的 循环 变量 , 它 只 在 函数 init 中 有 效 : 


function init(){ 





Var i; 
for(i= 0; i< 10; i+ + ){ 
randomArray[i] = random(100); 





} 
» 


局 部 变量 可 以 防止 名 字 冲 突 , 而 名 字 冲 突 可 能 会 导致 致命 的 程序 错误 。 例 如 ,变量 n 是 
一 个 局 部 变量 , 它 可 以 用 在 一 个 影片 剪辑 对 象 中 计数 ,而 另外 一 个 影片 剪辑 对 象 中 可 能 也 有 
一 个 变量 n, 它 可 能 用 作 一 个 循环 变量 ,因为 它们 有 不 同 的 作用 域 ,所 以 并 不 会 造成 任何 
冲突 。 

使 用 局 部 变量 的 好 处 在 于 减少 程序 错误 发 生 的 可 能 。 例 如 ,一 个 函数 中 使 用 局 部 变量 ， 
那么 这 个 变量 只 会 在 函数 内 部 被 改变 ,而 一 个 全 局 变量 可 以 在 整个 程序 的 任何 位 置 被 改变 ， 
使 用 错误 的 变量 可 能 会 导致 郴 数 返 回 错误 的 结果 ,甚至 使 整个 系统 崩溃 。 

此 外 ,函数 的 参数 也 将 作为 该 函数 的 一 个 局 部 变量 来 使 用 ,例如 : 


x 3; 
function test (x) 
§ 
x= 1; 
a= xX; 
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test (x) 


程序 执行 之 后 的 结果 是 a 二 1,x 二 3。 从 这 个 例子 可 以 看 出 test 函数 中 的 x 参数 的 确 是 
被 作为 函数 内 部 的 局 部 变量 来 处 理 了 。 


4. 变量 的 声明 


在 程序 中 ,给 一 个 变量 直接 赋值 或 者 使 用 setVariables 语句 赋值 就 相当 于 声明 了 全 局 变 
量 ; 局 部 变量 的 声明 需要 用 var 语句 。 在 一 个 函数 体内 用 var 语句 声明 变量 ,该 变量 就 成 了 
这 个 函数 的 局 部 变量 , 它 将 在 函数 执行 结束 的 时 候 被 释放 ;在 根 时 间 轴 上 使 用 var 语句 声明 
的 变量 也 是 全 局 的 ,它们 在 整个 动画 结束 的 时 候 才 会 被 释放 掉 。 

在 声明 了 一 个 全 局 变量 之 后 , 紧 接着 再 次 使 用 var 语句 声明 该 变量 ,那么 ,这 条 var 语句 


无 效 , 例 如 : 
avVariable = 10; 
var aVariable; 4 
aVariable+ = 1; . 


在 上 面 的 脚本 中 ,变量 aVariable 被 重复 声明 了 两 次 ,其 中 var 语句 的 声明 被 视 为 无 效 ， 
脚本 执行 后 ,变量 aVariable 的 值 将 为 11。 

。 

call 语句 同样 会 为 它 调 用 的 程序 块 生成 一 个 局 部 变量 作用 域 , 当 被 调用 的 脚本 结束 的 

时 候 , 这 个 局 部 作用 域 也 同时 消失 。Flash 中 的 call 语句 可 以 用 with 语句 取代 。 @ 
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使 用 trace 语句 可 以 检测 变量 的 值 , 例 如 ,trace(aVariable) 将 变量 aVariable 的 值 转换 
成 字符 串 传 递 到 Output 窗口 中 ,在 调试 模式 下 ,还 可 以 随时 改变 和 获取 某 一 个 变量 的 值 。 


5. 变量 的 使 用 


在 引用 一 个 变量 的 时 候 ,必须 先进 行 声 明 ( 使 用 var 语句 或 者 直接 赋值 ) ,如果 变 量 没有 
得 到 初始 化 ,那么 ,在 下 面 的 例子 中 ,将 会 产生 错误 : 

gotoAndPlay ( aFrame ); 
其 中 aFrame 是 一 个 标签 ,因为 aFrame 没有 被 声明 ,gotoAndPlay 将 会 被 错误 的 执行 , 跳 转 
到 一 个 不 确定 的 位 置 。 

变量 的 内 容 可 以 随时 被 改变 ,变量 的 类 型 决定 了 它们 的 行为 。 简 单数 据 类 型 传递 的 是 
变量 的 值 ,就 是 说 ,变量 的 内 容 会 被 复制 一 份 之 后 才 被 传递 出 去 ,不 论 是 在 赋值 语句 中 ,还 是 
作为 参数 传递 给 一 个 函数 都 是 一 样 : 


varx= 4; 
vary= Math.sqrt (x); 


上 面 例子 中 ,变量 x 的 值 被 复制 后 传递 给 sqrt 函数 ,并 将 返回 结果 2 赋值 给 变量 y, 变 量 
x 的 值 保 持 不 变 。 对 象 数据 类 型 包含 有 大 量 复杂 的 信息 ,具有 这 种 数据 类 型 的 变量 并 不 保存 
对 象 的 实际 内 容 , 它 们 保存 的 只 是 一 个 指向 对 象 的 指针 , 当 调 用 对 象 的 属性 或 者 方法 的 时 
候 , 根 据 这 个 指针 找到 该 对 象 实际 的 位 置 并 返回 所 需要 的 内 容 。 
下 面 是 一 个 通过 指针 进行 传递 的 例子 : 
Var myArray = ["Holly", "Tom"]; 
Var newArray = myArray; 
myArray[1] = "Marry"; 
trace (newArray); 
上 面 的 例子 中 ,一 个 数组 对 象 myArray 有 两 个 元 素 ,newArray 被 赋值 为 指向 myArray 
的 指针 , 当 myArray 的 第 二 个 元 素 被 改变 之 后 ,所 有 指向 它 的 其 他 变量 内 容 也 会 改变 ,最 后 
的 trace 语句 将 会 把 ["Marry"，"Tom"] 输 出 到 输出 窗口 中 。 
下 面 是 一 个 将 对 象 类 型 的 变量 作为 参数 传递 给 函数 的 例子 : 


function initArray (newArray) { 
var i; 
for (i= 0; i< 10; i+ + ){ 
newArray[i] = random( 100 ); 

} 

和 

var myArray = new Array(); 

initArray( myArray ); 


上 例 中 ,myArray 被 传递 到 函数 initArray 中 ,因为 传递 的 是 对 象 指针 ,所 以 在 函数 内 , 数 
组 myArray 将 被 初始 化 。 


@: 


在 ActionScript 中 ,对 一 般 对 象 的 引用 称 为 强 引用 ,对 MC 动画 的 引用 称 为 弱 引 用 。 强 
引用 是 指 只 要 还 有 一 个 指针 指向 该 对 象 ,那么 这 个 对 象 就 不 能 被 释放 ; 弱 引 用 是 指 如 果 MC 
动画 结束 之 后 ,所 有 指向 该 MC 动画 的 指针 将 随 之 而 不 再 有 效 。 


11.2.6 程序 流程 控制 


与 其 他 编程 语言 一 样 ,ActionScript 语言 也 有 控制 语句 。 例 如 ,条 件 控制 语句 if、else if， 
循环 控制 语句 while .dof } while 等 。 


1. 条 件 控制 


条 件 选择 语句 用 来 判断 所 给 定 的 条 件 是 否 满足 ,根据 判断 结果 真 (true) 与 假 (false) , 决 
定 执行 一 种 选择 。 一 般 说 来 ,判断 条 件 是 以 关系 表达 式 或 逻辑 表达 式 的 形式 出 现 。 

条 件 选 择 根据 结构 ,主要 分 成 单 向 选择 、 双 向 选择 。 

1) 单 向 选择 

单 向 选择 的 语法 为 : 


if (condition){ 
statements; 
} 


单 向 选择 是 当 判 断 条 件 (condition) 成 立时 , 则 执行 这 后 面 的 statements 语句 。 若 条 件 
不 成 立 , 则 跳 过 后 面 的 statements 语句 ,执行 人 } 之 后 的 流程 语句 。 例 如 ， 
input = "word" 
f (input = = dremers&&passward= = dreamers){ 
gotoAndPlay (welcome); 


. 
gotoAndplay (wrong); 


在 上 例 中 ActionScript 执行 到 这 语句 时 先 判断 : 若 括号 内 的 逻辑 表达 式 的 值 为 真 , 则 先 
执行 “gotoAndPlay(welcome)”, 然 后 再 执行 后 面 的 “gotoAndplay(wrong)” 语 句 ; 若 为 假 , 则 
跳 过 这 语句 直接 执行 后 面 的 “gotoAndplay(wrong) ”语句 。 

2) 双 向 选择 

双向 选择 语句 是 在 [语句 中 ,将 if 与 else 联 用 。 双 向 选择 语法 如 下 : 


if (condition) { 
statements- A; 
Jelse{ 
3tatements— B; 


’ 
当 计 语句 的 条 件 式 的 值 为 真 时 ,执行 statements 一 A 的 内 容 , 执 行 完 毕 后 跳 过 else 语句 
向 下 执行 ;如 果 让 语句 的 条 件 式 的 值 为 假 时 , 跳 过 statements 一 A 的 内 容 ,直接 执行 state- 
ments 一 B 的 内 容 。 例 如 : 


input = "word" 
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if(input = = dremersgspassward- = dreamers){ 
gotoAndPplay (welcome); 
Jelse{ 


gotoAndplay (wrong); 
} 


此 例 与 前 面 单 向 选择 的 实例 似乎 很 相似 ,仅仅 只 多 加 了 一 个 else, 实 际 上 二 者 有 根本 的 
不 相同 。 单 向 选择 实例 当 条 件 为 真 时 先 执行 “gotoAndPlay(welcome)”, 然 后 再 执行 后 面 的 
“gotoAndplay(wrong) ”语句 。 这 个 实例 中 当 条 件 为 真 时 ,执行 完 “gotoAndPlay(welcome)” 
不 执行 “gotoAndplay(wrong) ”语句 ; 当 条 件 为 假 时 ,不 执行 “gotoAndPlay(welcome) ”而 执行 
“gotoAndPlay(Cwrong)”。 


2. 循环 控制 


在 ActionScript 中 ,可 以 按照 一 个 指定 的 次 数 重复 执行 一 系列 的 动作 ,或 者 是 在 一 个 特 
定 的 条 件 时 ,执行 某 些 动 作 。 在 使 用 ActionScript 编程 时 ,可 以 使 用 while .do. .. while ,for 
以 及 for. . .in 语句 来 创建 一 个 循环 语句 。 


1) 指 定 循环 
在 ActionScript 中 ,可 以 使 用 for 语句 使 程序 按照 指定 的 次 数 循环 ,在 一 些 特殊 的 场合 ， 
这 种 功能 具有 很 重要 的 意义 。 


在 很 多 情况 下 ,需要 预 设 一 个 计数 初 值 来 控制 循环 的 次 数 。 通 过 声明 一 个 变量 ,并 编写 
一 条 每 当 循环 被 执行 一 次 就 能 对 变量 进行 自 增 或 自 减 运 算 的 语句 的 方法 , 便 可 以 实现 一 个 
对 循环 的 控制 。 例 如 : 


for (statement1; expression; statement2) { 
statements (s) 


} 
先 执行 statementl , 当 expression 的 值 为 true 时 反复 执行 statement(s) ,并 在 执行 完 一 
轮 后 执行 一 次 statement2 ,直到 expression 的 值 为 false。 
或 者 
for (variable in obj mc) { 


statements (s) 


variable 依次 取 obj_me 的 各 成 员 名 称 , 反 复 执 行 statements(s), 直 到 所 有 成 员 都 取 过 
一 遍 。 

2) 条 件 循环 语句 

在 编程 过 程 中 ,有 时 需要 在 满足 一 个 条 件 的 情况 下 实现 一 个 循环 ,这 时 需要 用 到 while 
语句 或 do. .. while 语句 。 

在 ActionScript 中 ,循环 语句 while 用 于 对 一 个 表达 式 求 值 ,如 果 表 达 式 的 值 是 true, 那 
么 循环 体 中 的 代码 将 被 执行 。 当 循环 体 中 的 所 有 语句 都 被 执行 之 后 ,表达 式 将 按照 程序 要 
求 再 次 进行 求 值 ,就 这 样 反 复 进行 直到 表达 式 的 值 变 成 false, 才 跳出 本 次 循环 ,执行 循环 后 


的 语句 。 例 如 : 


while (expression) { 
statement (s) 
} 


当 expression 的 值 为 true 时 反复 执行 statement(s) 直到 expression 的 值 为 false。 
或 者 
gof 


statement (s) 
} while (expression) 


反复 执行 statement(s) 直 到 expression 为 false。({}) 内 语句 数 为 1 时 {} 可 省 略 。 


11.3 使 用 [动作 了 面板 编写 脚本 


前 面 介 绍 了 ActionScript 的 基本 概念 和 编程 基础 知识 ,但 要 使 用 ActionScript 编程 就 应 
打开 【动作 了 面板 , 它 是 Flash 8 提供 的 专门 用 来 编写 ActionScript 程序 的 开发 环境 。 

相对 以 前 的 版 本 ,Flash 8 的 【动作 面板 功能 得 到 了 改善 ,使 用 方法 也 趋 于 简单 。 其 最 大 
改变 就 是 把 Flash 5 中 的 [普通 模式 ] 编 写 方式 又 恢复 了 ,改名 为 【脚本 助手 】 ,这 种 模式 便于 
初学 者 使 用 ,如 图 11. 2 所 示 。 
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【脚本 助手 7 模式 【代码 编写 模式 
图 11.2 【动作 了 面板 


要 打开 【动作 了 面板 ,可 执行 下 面 操作 之 一 。 
e 选择 [窗口 【动作 ] 命 令 。 
e 选中 要 添加 ActionScript 程序 脚本 的 关键 帧 或 舞台 上 的 对 象 . 按 F9 键 。 


11.3.1 【代码 编写 模式 


“ 工 欲 善 其 事 , 必 先 利 其 器 ”, 作 为 ActionScript 编程 的 专用 环境 ,在 开始 向 动画 中 添加 
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”ActionScript 脚本 之 前 , 先 来 熟悉 一 下 [动作 了 面板 ,如 图 11. 3 所 示 。 





代码 编辑 区 








程序 添加 对 象 





图 11.3 【动作 了 面板 


1. 动作 工具 箱 


该 工具 箱 中 包含 了 所 有 的 ActionScript 动作 命令 和 相关 的 语法 。 在 列表 中 ,图 标 圆 是 命 
令 文 件 夹 , 单 击 可 以 打开 这 个 命令 文件 夹 ;图 标 国 表 明 是 一 个 可 使 用 的 命令 .语法 或 者 其 他 
的 相关 工具 ,双击 它 或 者 用 鼠标 拖 动 它 至 动作 编辑 区 即 可 进行 引用 。 动 作 工 具 箱 的 命令 很 
多 ,在 使 用 中 可 以 不 断 积 累 和 总 结 。 


2. 程序 添加 对 象 
动作 工具 箱 的 下 方 可 显示 当前 ActionScript 程序 添加 的 对 象 ,例如 图 11. 3 所 示 的 该 列 
表 框 中 ,显示 选 定 对 象 为 "bubble 2 blue”, 场 景 1 中 共有 两 个 对 象 :* 图 层 1: 帧 1" 和 *bubble 2 


blue”。 
3. 工具 栏 


在 动作 工具 箱 的 左边 ,有 一 个 编辑 工具 栏 ,其 中 的 工具 是 在 进行 ActionScript 命令 编辑 
时 经 常用 到 的 。 

图 标 表示 添加 新 动作 。 

昂 图 标 表示 查找 , 单 击 后 会 打开 如 图 11.4 所 示 的 对 话 框 , 在 其 中 [查找 内 容 ] 文 本 框 中 
输入 要 查找 的 名 称 , 再 单 击 【查找 下 一 个 3 按钮 即 可 。 

如 果 要 替换 代码 ,在 图 11. 4 所 示 对 话 框 中 的 [替换 为 ] 文 本 框 中 输入 被 蔡 换 的 内 容 ,然后 
单 击 右 侧 的 [替换 3 或 【全 部 蔡 换 】 按 钮 即 可 。 











图 11.4 【查找 和 替换 ] 对 话 框 


鲜 图 标 表 示 插 入 目标 路 径 。 动 作 的 名 称 和 地 址 被 指定 了 以 后 ,才能 使 用 它 来 控制 一 个 
影片 剪辑 或 者 下 载 一 个 动画 ,这 个 名 称 和 地 址 就 被 称 为 TargetPath( 目 标 路 径 )。 单 击 该 按 
钮 在 打开 的 【插入 目标 路 径 ] 对 话 框 中 输入 对 象 的 路 径 ,或 者 直接 在 下 边 选择 ,如 图 11.5 
所 示 。 





插入 目标 路 径 
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图 11.5 【插入 目标 路 径 ] 对 话 框 


多 语法 检查 工具 。 选 中 要 检查 的 语句 , 单 击 该 按钮 ,系统 会 自动 检查 其 中 的 语法 错误 。 
例如 ,选中 如 图 11. 3 所 示 中 的 代码 , 单 击 该 按钮 检查 ,将 弹出 如 图 11. 6 所 示 对 话 框 ,显示 “此 
脚本 中 包含 有 错误 ,会 在 输出 面板 中 全 部 列 出 ”的 信息 。 然 后 ,选择 [窗口 I【 输 出 3 菜单 命 
令 , 打 开 [ 输 出 ] 面 板 , 在 该 面板 中 显示 所 有 错误 .如 图 11.7 所 示 。 








Flash 8 [Ea 


和 当 + 场 负 - 场 久 1， 天 屋 - 国 旦 1， 估 =1: 第 3 行 ! 需要 “)' 
] 


此 隐 本 中 包含 有 模 误 ， 会 在 输出 面板 中 全 部 列 出 。 ee 


11.6 【插入 目标 路 径 ] 文 本 框 图 11.7 在 [输出 ] 面 板 中 显示 所 有 错误 





于 自动 套用 格式 。 单 击 该 按钮 Flash 8 将 自动 编排 编写 好 的 语言 。 

饼 代 码 提示 。 使 用 该 按钮 可 以 在 编写 代码 时 给 与 提示 。 

路 程序 除 错 工 具 。 单 击 该 按钮 会 根据 命令 的 不 同 显示 不 同 的 除 错 信息 ,主要 包括 :设置 
断 点 \ 删 除 断 点 和 删除 所 有 断 点 。 
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4. 代码 编辑 区 


该 区 是 进行 ActionScript 编程 的 主 区 域 , 当 前 对 象 的 所 有 脚本 程序 都 在 该 区 显示 ,要 编 
写 的 程序 内 容 也 在 这 里 进行 编辑 ,如 同一 个 文本 编辑 器 。 


11.3.2 【脚本 助手 模式 


【脚本 助手 模式 也 称 为 标准 模式 或 普通 模式 ,在 【动作 了 面板 中 单 击 【 脚 本 助手 按钮 
六 和 ,就 会 切换 到 [脚本 助手 模式 ,如 图 11. 8 所 示 。 


指令 说 明 参数 设置 








图 11.8 【脚本 助手 ] 模 式 


指令 说 明 栏 介绍 了 当前 动作 指令 的 作用 。 
参数 设置 栏 只 在 [脚本 助手 模式 面板 上 才 有 ,【 代 码 编写 模式 面板 上 没有 这 一 栏 。 当 
用 户 使 用 不 同 指令 时 ,相关 参数 栏 的 内 容 发 生变 化 ,但 总 是 显示 动作 指令 的 相关 参数 。 
【动作 了 面板 选项 : 单 击 该 按钮 ,会 弹出 [动作 面板 的 许多 选项 命令 。 这 些 选 项 命令 都 是 
关于 面板 操作 的 。 
在 脚本 编辑 区 的 上 方 ,还 有 几 个 按钮 。 这 些 按钮 主要 是 编程 操作 的 工具 ,在 编程 时 大 有 
用 处 。 
增加 指令 储 :在 光标 所 在 命令 行 下 面 添加 动作 或 语句 。 
删除 指令 号 :删除 当前 选取 的 指令 行 。 
查找 凡 . 在 脚本 中 查找 字符 。 
选择 目标 路 径 候 :插入 目标 路 径 。 
® 将 选取 的 指令 下 移 了 :将 当前 代码 行 向 下 移动 一 行 。 
ee 将 选取 的 指令 上 移 ^ :将 当前 代码 行 向 上 移动 一 行 。 
在 【脚本 助手 了 模式 面板 中 怎样 编写 脚本 呢 ? 具体 操作 步骤 如 下 。 
(1) 用 鼠标 在 左边 的 动作 工具 箱 选 取 语 句 ,双击 或 者 拖 动 到 右边 的 脚本 窗口 中 。 





(2) 然后 在 上 边 的 参数 文本 框 里 填写 需要 的 参数 值 。 

(3) 需要 删除 某 语 句 时 , 先 在 右边 的 脚本 编辑 区 里 选中 语句 (这 时 可 以 看 到 语句 被 蓝 色 
高 亮 条 加 亮 ) ,用 Delete 键 或 者 单 击 左上 方 号 的 按钮 就 可 以 完成 删除 操作 。 

另外 ,可 以 使 用 鼠标 拖 动 语句 完成 插入 、 排 序 等 操作 ,也 可 以 使 用 和 今 调整 语句 
的 顺序 。 综 合 运 用 这 些 基本 操作 就 可 以 编写 出 整个 脚本 。 


(4 


11.4 ActionScript 的 一 般 使 用 方法 
下 面 介 绍 ActionScript 的 一 般 应 用 ,初步 了 解 ActionScript 的 使 用 方法 和 强大 的 功能 。 


11.4.1 给 关键 帧 增加 动作 


在 关键 帧 中 添加 ActionScript 脚本 程序 可 以 方便 地 对 动画 进行 控制 ,以 便 设 定 动画 的 时 
间 和 播放 内 容 , 这 是 ActionScript 在 实际 中 应 用 的 重要 方面 。 当 动画 播放 到 添加 Action- 
Script 脚本 的 那 一 帧 时 ,相应 的 ActionScript 程序 就 会 被 执行 。 
下 面 结合 一 个 实例 进行 介绍 ,具体 操作 步骤 如 下 。 
(1) 这 是 一 个 制作 比较 漂亮 的 站 点 片头 ,如 图 11. 9 所 示 。 有 关 该 动画 的 制作 ,本 例 就 不 
再 介绍 ,可 以 参考 光盘 素材 。 在 播放 时 ,会 发 现 动画 反复 播放 ,非常 烦人 。 
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图 11.9 动画 播放 效果 


(2) 启动 该 动画 ,把 播放 指针 拖 动 到 最 后 一 个 关键 帧 , 即 第 72 帧 ,如 图 11. 10 所 示 。 

(3) 在 【时 间 轴 ]J 面 板 中 新 增加 一 个 图 层 , 命 名 为 “动作 ”, 设 置 当前 图 层 为 “动作 ”图 层 ， 
把 播放 指针 确定 在 最 后 一 帧 上 ,选择 [插入 了 民 时 间 轴 了 J 民 关键 帧 3 命令 ,把 最 后 一 帧 
设置 为 关键 帧 ,如 图 11. 11 所 示 。 。 

(4) 选择 [窗口 ] 民 动作 了 命令 ,或 者 按 F9 键 打开 【动作 了 面板 ,在 【动作 工具 箱 】 中 展开 © 
【全 局 函数 】I〖 时 间 轴 控制 】 ,把 其 中 的 全 局 函数 stop() 拖 放 到 编辑 窗口 ,当然 也 可 
以 快速 输入 ,如 图 11. 12 所 示 。 
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图 11.10 把 播放 指针 拖 放 在 最 后 一 帧 上 图 11.11 新 建 动作 图 层 和 关键 帧 


(5) 这 时 在 [时间 轴 面板 面板 中 ,“ 动 作 ” 图 层 的 第 72 帧 上 出 现 一 个 小 写字 母 "a”, 如 图 
11. 13 所 示 ,表示 该 关键 帧 上 增加 了 一 个 动作 。 此 时 如 果 再 次 播放 , 当 播放 到 最 后 
一 帧 时 会 自动 停止。 











PO25), 
图 11.12 增加 动作 图 11.13 增加 动作 的 标志 


11. 4.2 给 按钮 增加 动作 


用 按钮 控制 动画 是 我 们 最 常见 的 一 种 交互 方式 ,例如 当 单 击 一 个 播放 按钮 ,动画 开始 播 
放 , 这 实际 是 在 该 按钮 上 添加 了 ActionScript 脚本 。 另 外 增加 鼠标 滑 过 按钮 的 动作 、 按 钮 被 
按 下 或 者 放 开 的 动作 等 。 在 设计 的 动画 中 如 果 添 加 了 类 似 的 效果 ,整个 作品 的 互动 性 就 会 
增强 ,这 样 就 能 很 容易 地 完成 交互 式 界面 的 制作 。 下 面 ,以 上 节 实 例 为 基础 增加 两 个 按钮 来 
随时 控制 动画 的 播放 和 停止 。 具 体操 作 步 骤 如 下 。 

(1) 启动 上 节 使 用 的 动画 实例 ,首先 制作 两 个 按钮 元 件 Play 和 Stop, 设 计 如 图 11. 14 

所 示 。 
(2) 在 主场 景 中 ,选中 “动作 ” 层 , 在 第 1 帧 中 增加 一 个 动作 Stop() ,方法 可 参考 上 节 介 
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绍 ,实现 动画 在 启动 时 就 立即 停止 播放 ,让 用 户 通 过 按钮 来 进行 控制 ,如 图 11. 15 
所 示 。 


图 11.14 创建 两 个 控制 按钮 图 11.15 在 “动作 "图 层 的 第 1 帧 增加 动作 





| 过 dse1j 悍 尘 讨 垩 1d14oSuol3o 酒 山 比 滤 


(3) 在 【时 间 轴 了 面板 中 增加 一 个 图 层 , 命 名 为 “按钮 ,把 【 库 ] 面 板 中 刚 定义 的 两 个 按钮 
拖 放 到 舞台 上 ,并 设置 位 置 和 大 小 ,如 图 11. 16 所 示 。 

(4) 选中 “Play” 按 钮 ,在 [动作] 面板 中 增加 play() 函数 ,此 时 为 了 方便 操作 可 以 单 击 【 脚 
本 助手 了 按钮 切换 到 【脚本 助手 ] 编 程 模式 下 ,如 图 11. 16 所 示 。 

(5) 以 同样 的 方式 为 "Stop 按钮 增加 stop() 函数 ,如 图 11. 17 所 示 。 











图 11.16 增加 播放 动作 图 11.17 增加 停止 动作 


(6) 选择 最 后 一 帧 ,选择 [修改 IK 时 间 轴 【转换 为 关键 帧 ] 命 令 , 把 最 后 一 帧 转换 为 关 
键 帧 ,目的 就 是 想 修改 最 后 一 帧 中 “Play” 按 钮 的 动作 ,使 其 跳 转 到 第 1 帧 再 继续 播 
放 , 操 作 如 图 11. 18 所 示 。 

注意 在 本 实例 中 由 于 还 有 其 他 代码 控制 着 第 1 帧 的 播放 ,所 以 还 需要 在 第 2 帧 再 增 
加 一 个 关键 帧 ,并 增加 stop 〇 函数 ,这 样 就 能 够 实现 开始 时 全 部 静止 ,如 图 11. 19 所 
示 。 当 然 这 样 设置 时 ,会 导致 重复 播放 时 需要 单 击 两 次 “Play” 按 钮 。 
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图 11.18 在 最 后 一 帧 按钮 上 增加 播放 动作 








(8) 最 后 浏览 效果 如 图 11. 20 所 示 。 


负 acronedia Flash Player B 
文件 中 查看 外) 近 制 人 帮助 


ww 





图 11.20 用 按钮 控制 动画 播放 效果 


11. 4.3 给 影片 剪辑 增加 动作 


这 种 方式 在 实际 中 应 用 较 少 ,但 使 用 起 来 会 简化 工作 。 使 用 给 影片 剪辑 增加 动作 的 方 
式 往往 是 在 该 影片 剪辑 被 载 人 或 者 是 为 了 在 某 些 过 程 中 获取 相关 信息 才 被 执行 的 。 舞 台 上 
的 所 有 实例 都 可 以 有 自己 的 ActionScript 程序 和 不 同 的 动作 ,执行 时 也 并 不 相互 影响 。 

上 述 三 种 添加 ActionScript 程序 的 方式 ,也 是 在 动画 制作 中 可 以 进行 Flash 8 脚本 程序 
添加 的 地 方 , 如 果 能 够 灵活 应 用 这 三 种 方法 ,同时 结合 设计 者 的 巧妙 构思 , 定 能 制作 出 精彩 
的 动画 。 
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全 Flash 网 页 技术 基础 
里 L 全 Flash 网 站 规划 


全 Flash 网 站 制作 步骤 


全 制作 Loading 
全 制作 Flash 导航 条 
全 加 载 外 部 文件 
全 读 取 外 部 数据 


本 章 要 点 : 

全 Fash 网 站 基本 以 图 形 和 动画 为 主 ,所 以 比较 适合 做 那些 文字 内 容 不 太 多 ,以 平面 \ 动 
面 效果 为 主 的 应 用 .如 企业 品牌 推广 、 特 定 网 上 广告 .网 络 游戏 ,个 性 个 人 网 站 等 。 本 章 结 合 
“ 印 宏 多 媒体 ”全 Fash 网 站 实例 来 介绍 Fash 网 页 制作 的 全 过 程 








12.1 Flash 网 页 入 门 


制作 全 Flash 网 站 和 制作 html 网 站 类 似 , 事 先 应 先 在 纸 上 夯 出 结构 草图 ,设计 好 网 站 的 
主题 .需要 用 到 哪些 网 页 元 素 、 元 素 之 间 的 联系 .元 素 如 何 运动 ,用 什么 风格 的 音乐 .整个 网 
站 可 以 分 成 几 个 逻辑 块 、 各 个 逻辑 块 间 的 联系 如 何 , 以 及 是 否 打 算 用 Flash 建构 全 站 或 是 只 
用 其 做 网 站 的 前 期 部 分 等 ,都 应 在 考虑 范围 之 内 。 

实现 全 Flash 网 站 效果 的 方法 多 种 多 样 , 但 基本 原理 是 相同 的 :将 主场 景 作为 一 个 “ 狂 
台 ”, 这 个 舞台 提供 标准 的 长 宽 比 例 和 整个 的 版 面 结构 ,* 演 员 ” 就 是 网 站 子 栏目 的 具体 内 容 ， 
根据 子 栏目 的 内 容 结构 可 能 会 再 派生 出 更 多 的 子 栏目 。 主 场景 作为 “舞台 ”基础 ,基本 保持 
自身 的 内 容 不 变 , 其 他 “演员 ”身份 的 子 类 ,次 子 类 内 容 根 据 需 要 被 导入 到 主场 景 内 。 

从 技术 方面 讲 , 如 果 已 经 掌握 了 不 少 单个 Flash 作品 的 制作 方法 ,再 多 了 解 一 些 SWF 文 
件 之 间 的 调用 方法 ,制作 全 Flash 网 站 并 不 会 太 复杂 。 

一 般 Flash 网 站 的 制作 流程 如 图 12. 1 所 示 。 


准备 源 素 村 
网 站 结构 规划 | > 网 页 制作 。 上 >。 网 站 雪人 
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图 12.1 Flash 网 站 制作 流程 


12.1.1 全 Flash 网 站 和 单个 Flash 作品 制作 比较 


下 面 来 比较 一 下 全 Flash 网 站 和 单个 Flash 作品 的 区 别 。 
1. 文件 结构 不 同 


单个 Flash 作品 的 场景 .动画 过 程 及 内 容 都 在 一 个 文件 内 ,而 全 Flash 网 站 的 文件 由 若 
干 个 文件 构成 ,并 且 可 以 随 发 展 的 需要 继续 扩展 。 全 Flash 网 站 的 文件 动画 分 别 在 各 自 的 对 
应 文件 内 。 通 过 ActionScript 导入 和 跳 转 控制 实现 动画 效果 ,由 于 同时 可 以 加 载 多 个 SWF 
文件 ,它们 将 重生 在 一 起 显示 在 屏幕 上 。 

2. 制作 思路 不 同 


单个 Flash 作品 的 制作 一 般 都 在 一 个 独立 的 文件 内 ,计划 好 动画 效果 随时 间 轴 的 变化 或 


场景 的 交替 变化 即 可 。 全 Flash 网 站 制作 则 更 需要 整体 的 把 握 ,通过 不 同文 件 的 切换 和 控制 
来 实现 全 Flash 网 站 的 动态 效果 ,要 求 制 用 户 有 明确 的 思路 和 良好 的 制作 习惯 。 


3. 文件 播放 流程 不 同 


单个 Flash 作品 通常 需要 将 所 有 的 文件 做 在 一 个 文件 内 ,在 观看 效果 是 必须 等 文件 基本 
下 载 完毕 才 开始 播放 。 但 全 Flash 网 站 是 通过 若干 个 文件 结合 在 一 起 ,在 时 间 流 上 更 符合 
Flash 软件 产品 的 特性 。 文 件 可 以 做 得 比较 小 ,通过 陆续 载 人 其 他 文件 更 适合 Internet 的 传 
播 , 这 样 同时 避免 了 访问 者 因 等 待 时 间 过 长 而 放弃 浏览 。 


12. 1.2 Flash 网 页 制作 的 重要 函数 


这 是 全 Flash 网 站 实现 的 关键 ,尤其 是 Flash 8 新 增 了 很 多 功能 强大 的 命令 ,关于 这 部 
分 ,请 用 户 参 看 其 他 的 资料 ,这 里 只 介绍 部 分 制作 全 Flash 网 站 需要 使 用 的 比较 重要 的 
ActionScript 函 数 。 


1. loadMovieNum( ) 和 loadMovie( ) 


e 语法 格式 
loadMovieNum("url",level[，variables]) 
loadMovie ("url",level/target[，variables]) 


ee ”功能 说 明 
在 播放 原来 加 载 的 影片 的 同时 将 SWF 或 JPEG 文件 加 载 进来 。 

ee 参数 说 明 
url 表示 要 加 载 的 SWF 或 JPEG 文件 的 绝对 或 相对 URL ,不 能 包含 文件 夹 或 磁盘 
驱动 器 说 明 。 
level 表示 把 SWF 文件 以 层 的 形式 载 人 到 Movie 里 , 若 载 入 0 层 , 则 载 入 的 SWF 文 
件 将 取代 当前 播放 的 Movie,2 层 高 于 1 层 。 
target 表示 可 用 路 径 拾取 器 取得 并 替换 目标 动画 ,和 载 入 的 影片 将 拥有 目标 影片 的 位 
置 . 大 小 和 旋转 角度 等 属性 。 用 Target 在 控制 载 信 . swf 位 置 时 比较 方便 。 
variables 表示 可 选 参数 ,指定 发 送 变 量 所 使 用 的 HTTP 方法 (GET/POST) ,如 果 没 
有 则 省 略 此 参数 。 

e 提示 
Flash 允许 同时 运行 多 个 SWF 文件 ,Flash 一 旦 载 入 一 个 SWF 文件 , 则 占据 了 一 个 
层次 ,系统 默认 的 是 _Flash0 或 _Leve 10, 之 后 的 Movie 则 按 顺 序 放 在 leve 10 一 level 
16000 里 。 第 一 个 载 入 的 SWF 文件 为 _Flasho 或 _Level0, 第 二 个 如 果 加 载 到 第 一 层 
时 的 称 为 _Flashl 或 _Levell, 依 次 类 推 。 注 意 前 提 是 前 面 载 入 的 文件 没有 退出 , 否 
则 冲 掉 第 一 个 SWF 文件 ,第 一 个 文件 也 从 内 存 中 退出 。 
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如 果 用 户 将 外 部 的 Movie 加 载 到 Level 0 层 或 者 Level 10 层 里 ,那么 ,原始 的 Movie 
就 会 被 暂时 取代 ,要 再 用 时 还 得 重新 Load 一 次 ,也 就 是 说 ,一 个 Level 在 一 个 时 间 里 
只 能 有 一 个 Movie 存在 。 在 使 用 LoadMovie 和 UnLoadMovie 时 必须 特别 注意 
Level 之 间 的 关系 ,和 否则, 当 和 希望 在 一 个 时 间 里 只 播放 一 个 Movie, 而 Unload 掉 前 一 
个 Movie 时 ,就 会 出 现 不 必要 的 麻烦 。 


.unloadMovieNum( ) 和 unloadMovie( ) 


语法 格式 


unloadMovieNum (level) 
unloadMovie [Num] (level/"target") 


功能 说 明 

从 Flash Player 中 删除 已 加 载 的 影片 。 
参数 说 明 

同 loadMovieNum() 和 loadMovie() 函 数 相同 。 


. loadVariables( ) 


® 语法 格式 


loadVariables ("url" ,level/"target" [, variables]) 


e 功能 说 明 


从 外 部 文件 中 (例如 文本 文件 ,或 由 CGI 脚本、Active Server Page (ASP) .PHP 或 
Perl 脚本 生成 的 文本 ) 读 取 数 据 ,并 设置 Flash Player 级 别 或 目标 影片 剪辑 中 变量 
的 值 。 


e 参数 说 明 


url 表示 变量 所 处 位 置 的 绝对 或 相对 URL。 

level 表示 指定 Flash Player 中 接收 这 些 变量 的 级 别 的 整数 。 

target 表示 指向 接收 所 加 载 变量 的 影片 剪辑 的 目标 路 径 。 

variables 表示 可 选 参数 ,指定 发 送 变量 所 使 用 的 HTTP 方法 (GET/POST) ,如 果 没 
有 则 省 略 此 参数 。 


. gotoAndPlay( ) 


ee 语法 格式 


gotoAndPlay (scene, frame) 


® 功能 说 明 


转 到 指定 场景 中 指定 的 帧 并 从 该 帧 开始 播放 。 如 果 未 指定 场景 , 则 播放 指针 将 转 到 
当前 场景 中 的 指定 帧 。 


e ”参数 说 明 
scene 表示 转 到 的 场景 的 名 称 。 
frame 表示 转 到 的 帧 的 编号 或 标签 。 


12.2 Flash 网 站 实例 剖析 


本 节 将 结合 一 个 Flash 网 站 实例 进行 具体 介绍 。“ 印 宏 多 媒体 ”网 站 是 一 个 个 人 网 站 ,内 
容 不 多 ,很 适合 用 Flash 进行 建站 ,以 发 挥 个 人 风格 。 


12.2.1 实例 网 站 结构 规划 


本 网 站 栏目 主要 包括 6 个 版 块 :媒体 开发 .资源 下 载 . 闪 容 大 侠 、 友 情 链 接 、 进 入 论坛 . 关 
于 作者 ,如 图 12. 2 所 示 。 

子 栏目 “资源 下 载 " 包 括 4 个 小 栏目 :Macromedia Studio MX、Photoshop 7. 02 中 文 版 、 
Painter 7 自然 画笔 7、After Effect5. 5 英文 版 。 

子 栏目 “内 容 大 侠 ” 包 括 10 个 小 栏目 : Rocky ,玲玲 ,易拉罐 、 海 明 威 、 花 火 、.DFlying、 杨 
格 、 白 丁 、 小 小 、 拾 荒 。 

子 栏目 “友情 链接 "包括 5 个 小 栏目 。 子 栏目 “关于 作者 ”包括 两 个 小 栏目 。 

整个 网 站 的 结构 用 图 12. 2 表示 (用 文件 名 表示 各 个 版 块 ) 。 

双 红 线 部 分 构成 主场 景 (舞台 ) ,每 个 子 栏目 在 首页 里 仅 保留 名 称 , 属 性 为 按钮 。 

蓝 虚线 部 分 内 容 为 次 场景 (演员 ), 可 以 将 次 场景 内 容 做 在 一 个 文件 内 ,同时 也 可 以 做 成 
若干 个 独立 文件 ,根据 需要 导入 到 主场 景 (舞台 ) 内 。 
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图 12.2 Flash 网 站 结构 图 
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12. 2.2 首页 场景 index. swf 的 制作 


本 例 全 Flash 网 站 由 主场 景 子 场景 .次 子 场景 构成 。 

和 制作 HTML 网 站 类 似 , 一 般 先 制作 一 个 主场 景 index. swf, 主 要 内 容 包括 :长 宽 比 例 、 
背景 栏目 导航 按钮 .网 站 名 称 等 “首页 ”信息 。 最 后 发 布 成 一 个 HTML 文件 ,或 者 自己 做 一 
个 HTML 页 面 ,内 容 就 是 一 个 表格 ,里 面 写 上 index. swf 的 岩 入 代码 即 可 。 
主场 景 安排 设置 如 图 12. 3 所 示 。 





副 栏 目 








图 12.3 Flash 网 站 首页 效果 


LOGO 标识 区 域 一 般 为 网 站 名 称 ,版 权 等 固定 信息 区 ,通常 所 在 位 置 为 Flash 动画 的 边 
缘 位 置 。 

在 LOGO 右边 主要 放置 一 些 动画 广告 ,也 称 为 Banner。 

导航 栏 为 网 站 栏目 导航 按钮 ,通常 也 是 固定 在 某 个 区 域 。 按 钮 可 以 根据 需要 做 成 静态 
或 动态 效果 ,甚至 可 以 做 成 一 个 包含 影片 剪辑 变化 的 按钮 。 

中 间 部 分 为 主场 景 导入 子 文件 的 演示 区 域 。 

有 时 根据 内 容 需 要 ,可 以 在 下 边 较 小 区 域 ,或 在 左右 两 侧 狭长 区 域 设置 一 些 常用 的 栏 
目 ,作为 主 栏目 的 补充 。 

在 子 文件 的 装载 方面 主要 用 到 LoadMovieNum、UnloadMovieNum 两 个 控制 函数 。 这 
里 主要 以 子 栏目 “媒体 开发 "的 制作 为 例 。 主 场景 文件 index 中 有 一 个 按钮 "媒体 开发 ", 当 单 
击 “ 媒 体 开发 ”按钮 时 ,希望 导入 index001. swf 文件 。 所 以 在 主场 景 内 选择 “媒体 开发 "按钮 
添加 ActionScript 代码 : 


on (release) { 
( 288 js 


tellTarget ("/") { 
loadMovieNum ("index100.swf", 100); 


JoadMovieNum ("time.swf", 101); 
} 
于 


其 他 按钮 设置 相同 ,就 不 再 重复 了 。 
12.2.3 次 场景 的 制作 


现在 确定 “资料 下 载 ? 子 栏目 需要 导入 的 文件 index002. swf ,该 文件 计划 包含 4 个 子 文 
件 。 所 以 index002. swf 文件 的 界面 只 包含 用 于 导入 4 个 独立 子 文件 的 4 个 图 形 按钮 和 标 
题 ,如 图 12.4 所 示 。 








图 12.4 “资料 下 载 " 子 栏目 效果 


从 图 12. 4 所 示 可 以 看 到 index002. swf 文件 包含 4 个 属性 为 按钮 的 小 图 标 , 分 别 为 bbl 
到 bb4。 当 单 击 它们 则 分 别 导 入 相应 文件 s1. swf 到 s4. swf 文件 。 
在 场景 内 选择 bb2 ,为 这 个 按钮 添加 ActionScript: 


on (release) { 
loadMovieNum("so/s2.swf"，2) 7 


依次 将 4 个 按钮 分 别 设置 好 相对 应 的 脚本 以 便 调 用 相应 的 文件 。 


这 里 设置 level 为 2, 是 为 了 保留 并 区 别 主 场景 1 而 设置 的 导入 的 层次 数 , 如 果 需 要 导 
入 下 一 级 的 层 数 , 则 层 数 增加 为 3, 依 次 类 推 。 


其 他 5 个 次 场景 的 制作 效果 如 图 12. 5 所 示 。 


~ 
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图 12.5 其 他 5 个 次 场景 的 制作 效果 


12. 2.4 二 级 次 场景 制作 


这 里 的 二 级 次 场景 是 与 上 级 关联 的 内 容 .是 本 例 中 三 级 结构 中 的 最 后 一 级 。 





该 级 3 





要 


为 全 Flash 网 站 的 具体 内 容 部 分 ,可 以 是 详细 的 图 片 文字、 动画 内 容 。 这 里 需要 插入 的 是 图 


片 ,但 同样 需要 做 成 与 主场 景 比例 同等 的 SWF 文件 ,如 图 12. 6 所 示 。 


290 


STUDIO -| 


2 








图 12.6 二 级 次 场景 制作 效果 


该 场景 是 最 底层 场景 ,为 主体 内 容 显 示 部 分 ,具体 动画 效果 大 家 可 以 根据 需要 继续 深 
人 。 注 意 要 在 场景 最 后 一 帧 处 加 入 停止 ActionScript 代码 “stop();”, 这 样 可 以 停止 场景 动 
面 的 循环 动作 。 


12.3 Flash 网 站 重点 突破 


将 Flash 8 整合 运用 于 网 页 上 ,是 Flash 程序 设计 中 重要 的 一 环 。 本 节 介绍 将 网 页 上 党 
用 的 元 件 组 合 运 用 在 Flash 上 时 ,要 解决 的 几 个 重要 技术 问题 。 


12.3.1 Loading 的 制作 


在 网 上 观看 Flash 电影 时 ,由 于 文件 太 大 ,或 是 网 速 限制 ,使 得 Flash 在 网 上 没 办 法 马上 
被 浏览 ,需要 一 段 下 载 的 时 间 , 因 而 Loading 就 应 运 而 生 了 。Loading 其 实 就 是 一 段 小 的 动 
画 , 可 以 比较 快 地 下 载 浏 览 ,而 不 至 于 看 Flash 时 一 片 空白 。 

考虑 到 网 络 传输 的 速度 ,如 果 index. swf 文件 比较 大 ,在 它 被 完全 导入 以 前 设计 一 个 
Loading 引导 浏览 者 耐心 等 待 是 非常 有 必要 的 。 同 时 设计 得 好 的 Loading 在 某 些 时 候 还 可 
以 为 网 站 起 一 定 的 铺垫 作用 。 

一 般 的 做 法 是 先 将 Loading 做 成 一 个 影片 剪辑 ,在 场景 的 最 后 位 置 设置 标签 ,如 end, 通 
过 if FrameLoaded 来 判断 是 否 已 经 下 载 完 毕 , 如 果 已 经 下 载 完 毕 则 通过 gotoAndPlay 控制 
整个 Flash 的 播放 。 

(1) 首先 , 按 Ctrl 十 F8 组 合 键 新 建 一 个 影片 剪辑 ,命名 为 loading。 
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(2) 然后 ,进入 这 个 影片 剪辑 ,做 一 个 方 框 ,不 带 边框 ,只 留 填充 色 。 选 中 方 框 , 按 F8 键 


(3 


(4 





转换 为 图 形 元 件 。 然 后 按 F6 键 在 第 100 帧 插入 一 个 帧 。 这 样 Loading 动画 就 是 配 
合 100% 的 脚本 ,到 100% 下 载 的 时 候 ,表示 完成 ,用 户 也 可 以 只 做 一 帧 ,不 会 影响 效 
果 , 如 图 12.7 所 示 。 

















图 12.7 loading 影片 剪辑 制作 效果 


接 下 来 ,将 loading 影片 剪辑 拖 入 *00” 场 景 中 的 第 1 层 , 放 到 合适 位 置 , 按 F5 键 延 
长 一 帧 。 将 影片 剪辑 实例 命名 为 jindutiao。 

然后 ,在 主场 景 中 新 建 一 层 , 命 名 为 Actions, 按 F6 键 延 长 出 一 个 关键 帧 ,因为 第 一 
帧 是 空白 帧 ,所 以 第 二 帧 也 延长 出 一 个 空白 关键 帧 了 。 

在 第 一 帧 中 输入 下 面 脚本 : 

total = _root.getBytesTotal (); 


loaded= _root.getBytesLoaded(); 
baifenshu = int((loaded/total)* 100); 


// 定 义 为 loaded 除 以 total 再 乘 以 100, 目 的 是 求 个 百 分 整 数 ,其 实 对 于 这 个 loading 的 效果 不 
大 ,不 过 打 个 基础 ,对 于 以 后 功能 详细 的 loading 有 用 
baifenbi = baifenshut " 委 "7 

setProperty ("jindutiao", xscale, baifenshu); 


在 第 二 帧 中 输入 下 面 脚本 : 


if (baifenshu = = 100) { 
gotoAndPplay (4); 
} else { 


gotoAndPlay (1); 


注意 让 (baifenshu = = 100) 千 万 不 要 写成 baifenshu = 100,= 是 赋值 ,= = 才 是 等 于 。 
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如 果 baifenshu 的 值 ,就 是 下 载 的 总 值 等 于 flash 本 身 的 总 值 ,执行 下 行 语句 , 跳 转 到 
第 4 帧 播放 ;如 果 其 他 情况 ,就 是 说 baifenshu 不 等 于 100, 则 会 回 到 第 一 帧 ,这 样 做 一 个 循 
环 , 当 loading 不 成 功 的 情况 下 , 回 到 第 一 帧 重新 执行 下 载 。 


(5) 新 建 一 层 ,命名 为 “百分比 ,然后 在 场景 中 放置 一 个 动态 文本 ,在 【属性 了 的 【变量 】 了 
文本 框 中 输入 变量 baifenbi。 按 F5 键 延长 一 帧 。 

(6) 按 Ctrl 十 F8 组 合 键 新 建 一 个 影片 剪辑 ,制作 一 个 动态 显示 信息 。 按 F6 键 建立 25 
个 连续 的 关键 帧 ,然后 每 隔 一 关键 帧 删除 省 略 号 ,制作 一 个 不 断 闪 动 的 动画 效果 ， 
提示 用 户 正在 下 载 ,如 图 12. 8 所 示 。 

(7) 回 到 主场 景 ,新 建 层 ,命名 为 “提示 ”, 把 上 面 新 制作 的 影片 剪辑 拖 入 场景 , 按 这 样 就 
全 部 完成 了 , 按 F5 键 延 长 出 一 帧 。 整 个 loading 制作 效果 如 图 12.9 所 示 。 演 示 效 
果 如 图 12. 10 所 示 。 
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12. 10 ”loading 演示 效果 
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12. 3.2 导航 按钮 的 制作 


首先 来 看 一 下 本 例 要 做 导航 按钮 的 效果 : 载 入 时 ,导航 按钮 由 左 到 右 快速 移 到 所 在 的 位 
置 ,同时 闪现 一 道 白 光 。 当 鼠标 指向 时 ,出 现 动 画 , 一 道 白光 由 下 向 上 闪 过 ,如 图 12. 11 所 示 。 


图 12. 11 导航 按钮 制作 效果 


了 解 效果 后 ,下面 就 结合 “关于 作者 ”按钮 实例 进入 具体 的 操作 过 程 。 

(1) 首先 , 按 Ctrl 十 F8 组 合 键 新 建 一 个 影片 剪辑 ,命名 为 b6 。 进 入 编辑 状态 ,新建 “ 文 
本 ” 层 , 用 文本 工具 输入 按钮 标题 ,本 按钮 为 “关于 作者 ”。 

(2) 在 第 9 帧 按 F5 键 插入 一 帧 ,延伸 第 1 帧 。 新 建 “白光 ” 层 , 在 第 1 帧 插入 空白 关键 
帧 ,在 第 2 帧 插入 一 关键 帧 ,用 直线 [ 具 给 制 一 条 白 线 ,宽度 为 1 像素 ,然后 按 F8 键 
转换 为 图 形 元 件 。 

(3) 在 第 8 帧 , 按 F6 键 插入 一 关键 帧 ,用 箭头 工具 把 该 线条 移动 到 文本 的 上 面 , 然 后 在 
这 之 间 创 建 运动 补 间 动 画 , 如 图 12. 12 所 示 。 

(4) 新 建 as 层 ,在 第 1 帧 中 输入 脚本 :stop();”, 防 止 动画 自动 运行 。 同 时 插入 新 建 按 
钮 元 件 ,如 图 12. 13 所 示 ,用 来 控制 动画 的 执行 , 即 当 鼠标 经 过 按钮 所 在 的 区 域 时 ， 
执行 下 面 动画 。 











图 12.12 制作 白光 效果 图 12.13 制作 按钮 效果 


(5) 回 到 b6 影片 剪辑 编辑 状态 选中 按钮 ,在 【动作 了 面板 中 输入 脚本 : 


on (rollover) { 
gotomndPlay(2) 7 
} 


即 当 和 鼠标 经 过 按钮 时 ,执行 下 面 的 帧 。 
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(6) 同时 ,设置 按钮 实例 的 透明 度 为 0, 使 其 隐藏 ,如 图 12. 14 所 示 。 在 第 9 帧 插入 一 关 
键 帧 ,输入 脚本 “stop();”, 即 让 动画 运行 一 次 。 
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图 12.14 制作 按钮 控制 

(7) 按钮 式 影片 剪辑 已 经 完成 ,其 他 几 个 标题 按钮 制作 相同 。 回 到 主场 景 *22” 中 ,我 们 
来 完成 导航 条 的 制作 。 导 航 条 的 制作 比较 简单 .把 各 个 主要 标题 按钮 影片 剪辑 引 
入 不 同 的 层 中 。 导 航 条 主要 通过 不 同 层 的 从 加 .不同 的 层 分 别管 理 各 自 不 同 的 元 
件 对 象 ,分 别 进行 不 同 效果 的 动画 处 理 ,而 相互 不 影响 。 制 作 产 生 一 种 奇妙 复杂 的 
变幻 效果 ,整个 时 间 轴 如 图 12. 15 所 示 。 

















图 12.15 导航 条 在 [时 间 轴 面板 中 设计 的 效 


12. 3.3 加 载 外 部 SWF 文件 


做 全 Flash 网 站 时 候 , 如 果 把 所 有 的 Flash 文件 都 放 入 一 个 文件 ,会 非常 大 ,不 利于 维护 。 
和 管理 。 所 以 通常 将 不 同 内 容 和 功能 的 内 容 分 别 放 和 人 不同 的 文件 。 做 成 站 点 时 ,通过 单 击 @ 


不 同 的 按钮 等 方式 载 人 单个 栏目 的 SWF 文件 ,而 浏览 者 在 浏览 网 页 时 ,可 逐个 下 载 ,大 大 减 
少 主 画 面 的 负担 。 

如 何 加 载 外 部 的 SWF 文件 呢 ? 这 里 主要 用 到 两 个 函数 :loadmovie() 和 loadmovienum()， 
关于 这 两 个 函数 的 说 明 请 参看 第 1 节 相 关内 容 。 
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新 编 网 页 制作 入 门 与 提高 


先 看 下 面 几 行 代码 : 


on (press) { 
tellTarget ("/") { 
loadMovieNum ("index104.swf", 100); 
素 
} 


加 载 index104. swf 到 主动 画 的 第 100 个 级 别 ,级 别 是 相对 于 不 同 的 SWF 文件 而 言 的 ， 
其 作用 相当 于 我 们 理解 的 层 , 如 falsh 里 的 层 ,上 一 层 的 东西 将 覆盖 下 一 层 的 内 容 。 

用 户 要 注意 loadMovieNum 语句 加 载 动画 时 ,只 能 加 载 本 地 或 同一 服务 器 上 的 SWF 文 
件 。 加 入 主动 画 里 的 SWF 文件 ,用 户 会 经 常 对 其 进行 控制 ,如 停止 .播放 ,关闭 等 ,下 面 介绍 


3 种 常用 方法 。 


1. 在 本 文件 里 控制 


以 index104. swf 为 例 ,在 文件 中 做 两 个 按钮 ,一 个 播放 一 个 停止 ,在 播放 按钮 上 输入 


脚本 : 


onl(release){ 
this.play(); 
} 
在 停止 按钮 上 输入 下 面 脚本 : 


on(release) { 
this.stop(); 
} 


这 样 测试 一 下 ,在 index. swf 主 文件 中 就 可 以 进行 控制 了 。 
2. 在 主 文件 里 控制 
同样 是 上 面 例子 里 的 播放 和 停止 两 个 按钮 ,在 播放 按钮 中 输入 下 面 脚本 : 


on (release){ 
_level100.play(); 
} 
//_level (数值 ) 是 级 别 的 意思 ，level100 就 是 第 100 级 别 的 意思 。 


在 停止 按钮 上 加 入 脚本 : 


on (release){ 
_level100.stop(); 
} 


测试 一 下 ,同样 可 以 达到 效果 。 
如 果 把 index104. swf 关闭 或 秃 载 , 可 以 进行 如 下 控制 : 


on (release) { 
unloadMovieNum (100) ; 
} 


到 这 里 我 们 就 掌握 了 简单 的 加 载 并 控制 SWF 文件 的 方法 。 


3. 加 载 定位 


上 面 讲 解 了 通过 按钮 加 载 外 部 SWF 文件 的 基本 知识 ,下 面 进行 深 一 层 的 探讨 ,如 何 给 
加 载 的 动画 定 个 位 置 。 定 位 有 两 种 方法 。 
e@ 制作 被 加 载 的 Flash 时 定位 :例如 ,主动 画 index. swf 文件 的 画布 大 小 是 700 * 400， 
被 加 载 的 index104. swf 的 大 小 为 200 * 200, 并 载 入 主动 画 (300,200) 的 位 置 。 
可 以 在 index104. swf 里 做 画布 和 index. swf 相同 , 即 为 700 x* 400, 这 样 导 出 影片 。 
在 index. swf 里 做 一 个 按钮 ,在 按钮 上 输入 下 面 脚本 : 


on (release){ 
loadMovieNum ("index104.swf", 100); 
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} 
这 样 就 完成 了 一 种 定位 加 载 的 方法 。 
ee 导入 主动 画 影 片 剪辑 :这 里 的 主动 画 影 片 剪辑 就 是 指 在 index. swf 文件 里 新 建 一 个 
空 的 影片 剪辑 ,将 外 部 的 index104. swf 文件 加 载 到 这 个 影片 剪辑 里 。 


12. 3.4 加 载 外 部 TXT 文件 

在 制作 全 Flash 网 站 的 过 程 中 经 常 遇 到 一 定量 的 文字 内 容 需 要 体现 ,文本 的 内 容 表 现 与 
上 面 介 绍 的 流程 是 一 样 的 ,不 同 的 地 方 体现 最 后 的 表现 效果 和 处 理 手法 还 是 有 些 不 同 。 

1. 文本 图 形 法 


如 果 文 本 内 容 不 多 ,又 希望 将 文本 内 容 做 得 比较 有 动态 效果 ,可 以 采用 此 法 。 将 需要 的 
文本 做 成 若干 个 Flash 的 元 件 ,在 相应 的 位 置 安排 好 。 文 本 图 形 法 的 文件 载 和 与 上 面 介绍 的 





处 理 手法 比较 类 似 ,原理 都 差不多 。 具 体 动态 效果 就 有 待 用 户 自己 去 考虑 ,这 里 就 不 多 介 
绍 。 本 例 中 大 部 分 文本 内 容 都 是 用 这 种 方法 导入。 : 
2. 直接 导入 法 。 
文本 导入 法 可 以 将 独立 的 . txt 文本 文件 ,通过 loadVariables 导入 到 Flash 文件 内 ,修改 - 
时 只 需要 修改 txt 文本 内 容 就 可 以 实现 Flash 相关 文件 的 修改 ,非常 方便 。 : 
首先 应 在 文本 框 属性 面板 中 设置 变量 名 。 . 
为 文本 框 所 在 的 帧 添加 脚本 : 
loadVariables ("变量 名 .txt",""); > 
编写 一 个 纯 文 本 文件 . txt( 文 件 名 随意 ) ,文本 开头 为 “变量 名 二 ”,“ 二 ”后 面 写 上 正式 的 @ 
文本 内 容 。 





例如 :index. fla 中 的 文本 导入 (本 例 中 最 初 没有 使 用 此 方法 ,下 面 的 例子 为 了 说 明 操作 
方法 ,是 临时 加 入 的 ) 步 又 如 下 。 
(1) 在 文件 index. fla 里 设置 “新闻 ”按钮 .在 其 中 输入 脚本 : 








on (release) { 
loadMovieNum ("news.swf", 1); 
unloadMovieNum (2); 


(2) 在 news. 0 文本 框 属性 设置 为 多 行 ,变量 名 为 





(3) 为 文本 框 所 在 的 帧 加 入 脚本 ， 
loadVariables ("news .txzt"，"") 7 

(4) 在 news. fla 文件 所 属 目录 下 编写 一 个 纯 文 本 文件 newst. txt, 文本 开头 为 
“news 二 ”,“ 二 ”后 面 写 上 正式 的 文本 内 容 , 如 图 12. 16 所 示 。 


文件 中 编辑 他) 格式 0) 查看 WW 帮助 0 
news=on (release) 《 
loadMouieNum("news .swf"，1)3 
unloadHouieNum (2); 

| 





图 12. 16 输入 文本 信息 
(5) 运行 index. fla 后 , 单 击 [ 新 闻 了 按钮 , 则 在 中 间 区 域 显示 将 文本 文件 完整 导入 到 主场 
景 内 的 效果 ,如 图 12. 17 所 示 。 


单 击 临时 加 入 的 
【新 闻 】 按 钮 


动态 载 入 文本 
文件 中 的 





图 12.17 直接 输入 文本 信息 效果 
通过 认真 地 学 习 ,相信 用 户 已 基本 掌握 Flash 网 站 的 制作 过 程 和 方法 ,最 后 还 需要 注意 
下 面 几 点 。 
e@ 设置 好 所 有 子 文件 的 长 . 宽 属性 。 全 Flash 网 站 从 面 面 层次 来 看 ,非常 类 似 于 Photo- 
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shop 的 层 结构 ,可 以 把 每 个 子 场景 看 做 一 个 层 文件 , 子 文件 是 在 背景 的 长 宽 范围 内 
出 现 。 为 了 方便 定位 ,我 们 可 以 让 子 文件 与 主场 景 保持 统一 的 长 宽 比例 ,这 样 非常 
便于 版 面 安排 。 否 则 就 必须 用 setProperty 语句 小 心 控制 它们 的 位 置 。 
@ 发 布 文件 时 要 将 HTML 选项 发 布 为 透明 模式 。 需 要 将 每 个 子 文件 发 布 为 透明 模式 
的 原因 是 不 能 让 子 文件 带 有 背景 底 色 ,由 于 子 文件 的 长 宽 比 例 与 主场 景 基本 是 一 臻 
的 ,如 果子 文件 带 有 底 色 ,就 会 遮盖 主场 景 的 内 容 。 
设置 方法 :在 [发布 设置] 对 话 框 中 单 击 HTML 标签 ,在 HTML 选项 卡 里 选择 【窗口 模 
式 ] 为 【透明 无 窗口 】), 如 图 12. 18 所 示 。 如 果 在 【发 布设 置 ] 对 话 框 中 没有 HTML 选项 卡 ,可 
以 先 在 [格式 〗 选 项 卡 中 选中 HTML(. html) 类 型 选项 ,如 图 12. 19 所 示 。 
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图 12.18 设置 透明 模式 图 12.19 选中 HTML 选项 


e ”使 用 文本 导入 时 ,注意 文本 文件 开头 必须 是 与 文本 框 属性 面板 中 “变量 "定义 相同 的 
名 称 ,然后 加 上 “= 符号 和 要 导入 的 字符 串 。 另 外 需要 导入 文本 的 SWF 文件 与 被 
导入 的 txt 文本 文件 最 好 在 同一 目录 内 。 

e 注意 仔细 检查 文件 之 间 的 调用 是 否 正确 ,避免 出 现 * 死 链接 ”。 
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3 早 L 本 章 内 容 包 括 
全 认识 层 
全 创建 层 
全 操作 层 
他 层 与 表格 的 相互 转换 


全 制作 层 网 页 


本 章 要 点 : 
层 是 网 页 中 相对 独立 的 一 个 区 域 , 它 不 受 网 页 排版 的 束缚 ,可 以 轻松 、 准 确 地 定位 ,并 且 
可 以 一 层 一 层 重叠 起 来 .因此 使 用 层 可 以 使 网 页 产生 特别 的 视觉 效果 。 本 章 将 详细 介绍 层 的 
工作 原理 和 使 用 方法 。 








13.1 认 识 层 


没有 层 的 网 页 像 一 个 平面 , 即 由 X 轴 和 YY 轴 组 合成 的 二 维 空间 。 而 层 区 域 是 在 Z 轴 上 ， 
如 图 13. 1 所 示 , 它 摆脱 了 二 维 平面 的 束缚 ,形成 三 维 空间 的 结构 。 同 时 , 层 与 层 之 间 的 相对 
位 置 也 由 Z 轴 的 坐标 来 决定 ,Z 值 设置 大 的 层 会 覆盖 Z 值 设置 小 的 层 , 就 像 释 放 在 一 起 的 
胶片 。 





层 位 于 乙 轴 上 


图 13.1 层 在 网 页 中 的 位 置 


层 不 仅 有 特殊 的 位 置 , 还 有 丰富 的 内 容 。 层 可 以 包含 文字 ,图像 .表单 和 搬 件 ,甚至 还 可 
以 包含 其 他 层 。 

在 网 页 中 加 入 层 时 ,其 实质 就 是 在 网 页 的 HTML 源 代码 中 增加 层 标签 。Dreamweaver 
8 所 支持 的 层 标签 有 二 span 二 二 div 二 二 layer 二 和 一 ilayer 二 四 种 。 但 在 Dreamweaver 8 
中 ,可 以 使 用 以 下 两 种 层 来 定位 页 面 内 容 。 

e ”CSS( 层 释 样 式 表单 ) 层 :使 用 二 span 宝 和 一 div 二 标签 。 

@ Netscape 层 :使 用 Netscape Navigator 的 一 layer 二 和 一 ilayer 二 标签 。 

目前 ,Internet Explore 4.0 和 Netscape Navigator 4.0 及 更 高 版 本 都 支持 使 用 一 span 二 
和 所 div 二 标签 建立 的 层 ,而 用 二 layer 之 和 志 ilayer 二 标签 建立 的 层 只 有 Netscape Navigator 
支持 。 不 过 在 Dreamweaver 8 中 默认 的 层 标 签 为 二 div 之 ,因此 在 上 述 两 个 浏览 器 中 都 可 看 
到 层 的 效果 。 


13.2 创 建 层 


Dreamweaver 8 提供 了 几 种 不 同 的 方法 建立 层 :可 以 通过 菜单 命令 在 文档 窗口 自动 创建 
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一 个 层 , 默 认 尺 寸 为 200 像素 X115 像素 :也 可 以 通过 单 击 【 插 和 人 了 面板 的 鸟 按钮 , 拖 动 鼠 标 ， 
在 窗口 画 出 一 个 层 。 


1. 通过 菜单 命令 创建 层 


通过 菜单 命令 创建 层 的 具体 步骤 如 下 。 

(1) 启动 Dreamweaver 8, 新 建 一 个 文档 。 把 鼠标 指针 置 于 文档 窗口 中 要 插入 层 的 位 
置 , 然 后 选择 【插入 了 民 布 局 对 象 ] 民 层 ] 命 令 。 

(2) 在 鼠标 指针 的 位 置 自动 产生 一 个 默认 的 层 , 同 时 层 的 锚 记 会 显示 在 文档 编辑 窗口 
的 左上 方 ,如 图 13. 2 所 示 。 
如 果 没 有 显示 ,可 以 选择 【编辑 】 代 首选 参数 命令 ,打开 【首选 参数 〗 对 话 框 ,在 【分 
类 列表 框 中 选择 【不 可 见 元 素 ] 选 项 ,然后 在 右 侧 设置 区 域 选 中 【[ 层 锚 记 】 复 选 杠 
即 可 。 

(3) 建 好 层 后 ,可 以 在 层 中 载 人 网 页 元 素 。 例 如 ,选择 [插入 了 【图 像 〗 命 令 , 插 入 图 片 则 
效果 如 图 13. 3 所 示 。 
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图 13.2 建立 层 


2. 通过 【插入 面板 创建 层 
(1) 选择 [窗口 ] 民 插入 命令 ,打开 【插入 了 面板 ,如 图 13. 4 所 示 。 





技巧 
按 下 Ctrl 十 F2 组 合 键 也 可 以 打开 [插入 面板 。 
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图 13. 4 【插入 ] 面 板 


(2) 单 击 【 插 和 人 了 面板 上 的 各 按钮 之 后 ,鼠标 指针 变 为 十 字形 。 在 编辑 窗口 的 合适 位 置 
拖 动 鼠标 可 以 画 出 一 个 层 ,如 图 13. 5 所 示 。 可 以 看 到 新 建 的 层 与 原 有 层 有 部 分 重 
三 ,也 就 是 在 本 章 开始 提 到 的 层 有 三 维 空间 布局 的 特点 。 
试 一 试 
不 是 单 击 而 是 按 住 [插入 面板 上 的 各 按钮 , 拖 动 鼠 标 指针 将 之 移出 插入】 面板 ,此 时 
鼠标 指针 会 带 有 小 十 字 。 然 后 释放 鼠标 , 便 产 生 一 个 默认 大 小 的 层 。 











13.3 操 作 层 


通过 13. 2 节 的 学 习 , 人 掌握 了 层 的 建立 , 接 下 来 就 是 如 何 操作 层 了 。 本 节 内 容 包括 :调整 
层 的 大 小 、 移 动 层 的 位 置 改变 层 与 层 之 间 的 相对 位 置 及 显示 和 隐藏 层 等 。 


13.3.1 调整 层 的 大 小 





建 好 层 后 , 层 的 大 小 可 以 随意 改变 ,方法 有 以 下 几 种 。 


1. 拖 动 层 边 框 的 控制 柄 改变 其 大 小 


具体 操作 步骤 如 下 。 

(1) 选择 层 。 把 鼠标 指针 定位 在 层 的 边框 , 单 击 后 会 出 现 8 个 控制 柄 。 

(2) 上 下 (或 左右 ) 拖 动 层 边框 的 控制 柄 到 合适 的 位 置 ,释放 鼠标 ,就 可 以 改变 层 的 大 
小 ,如 图 13.6 所 示 。 








图 13.6 拖 动 层 边框 控制 柄 改变 层 的 大 小 


2. 配合 【属性 面板 精确 调整 层 的 大 小 


(1) 选择 要 调整 的 层 , 打 开 【 属 性 了 面板 ,如 图 13. 7 所 示 。 
(2) 在 【属性 了 面板 的 [ 宽 了 和 【高 】 文 本 框 中 修改 层 的 宽度 值 和 高 度 值 。 
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图 13.7 利用 【属性 】 面 板 调整 层 的 大 小 











试 一 试 
配合 键盘 上 的 方向 键 改变 层 的 大 小 。 
@ 选择 要 调整 的 层 。 
@ 每 次 调整 一 个 像素 单位 : 按 住 Ctrl 键 , 按 方向 键 。 
加 每 次 调整 一 个 网 格 单位 : 按 住 Ctrl 十 Shift 组 合 键 , 按 方向 键 。 


提示 


有 关 网 格 介绍 详 见 13. 3. 3 节 。 
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3. 同时 调整 多 个 层 的 大 小 


(1) 按 住 Shift 键 ,分 别 单 击 多 个 层 的 边框 ,可 以 将 它们 一 起 选中 。 
(2) 选择 [修改 了 【排列 顺序 了 人 民 设 成 宽度 相同 3 或 【 设 成 高 度 相同 了 命令 ,如 图 13.8 


所 示 。 











ED bs 2 | 
图 13.8 利用 菜单 命令 来 调整 层 的 大 小 





(3) 调整 宽度 后 的 层 如 图 13. 9 所 示 。 


当 对 多 个 层 统一 宽度 和 高 度 时 ,调整 后 的 层 的 宽度 以 最 后 被 选中 的 那个 层 的 宽度 为 
基准 。 





试 一 试 
在 [属性] 面板 的 【多 个 层 ] 选 项 组 的 【 宽 ] 或 【高 ] 文 本 框 中 输入 值 ,这 个 新 值 会 应 用 在 
所 有 选 定 的 层 , 如 图 13. 10 所 示 。 

















(a) 调 整 前 (b) 调 整 后 
图 13.9 调整 宽度 后 的 层 
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图 13.10 利用 【属性 ] 面 板 同时 改变 多 个 层 的 宽度 











提示 
@ 在 调整 层 的 大 小 时 , 当 层 比 图 片 大 时 ,图 片 的 尺寸 保持 不 变 ; 而 层 最 小 只 能 调整 到 
图 片 的 大 小 。 
@ 在 调整 层 中 的 图 片 大 小 时 , 层 的 尺寸 会 随 着 图 片 的 大 小 而 调整 。 
13.3.2 移动 层 
除了 可 以 调整 层 的 大 小 外 ,还 可 以 移动 层 。 正 是 这 一 特征 方便 了 网 页 元 素 的 定位 ,使 网 : 
页 布局 更 加 方便 。 移 动 层 前 应 首先 选中 层 , 然 后 选择 以 下 的 一 种 方法 进行 移动 。 。 
。 拖 动 层 。 鼠 标 指针 定位 在 层 边框 左上 和 角 的 方形 控制 柄 上 , 拖 动 到 适合 的 位 置 , 如 图 : 
13. 11 所 示 ,释放 鼠标 即 可 。 ; 
| 二 ， 
@ 








(a) 把 光标 定位 到 控制 柄 上 (b) 按 住 鼠 标 拖 动 
图 13.11 拖 动 层 




















e 利用 [属性 ] 面 板 输入 数值 改变 层 的 位 置 。 在 【属性 面板 的 [ 左 ] 或 [上 ] 文 本 框 中 输 
入 新 的 水 平 或 垂直 的 坐标 值 ,如 图 13. 12 所 示 。 

e 配合 键盘 上 的 方向 键 移动 层 。 若 需 移动 一 个 像素 单位 , 则 按 一 次 方向 键 ; 若 需 移动 
一 个 网 格 单位 , 则 按 Shift 键 的 同时 按 一 次 方向 键 。 














图 13.12 利用 [属性 ] 面 板 移动 层 


13. 3.3 精确 定位 层 


在 调整 层 的 大 小 和 位 置 时 ,如 果 配 合 网 格 线 、 辅 助 线 , 以 及 这 些 辅助 工具 的 对 齐 功能 , 则 
会 更 加 精确 地 调整 层 。 
要 显示 网 格 线 ,选择 【查看 了 民 网 格 了 民 显 示 网 格 了 命令 即 可 ,如 图 13. 13 所 示 。 
选择 [查看 3I【 网 格 3I【 靠 齐 到 网 格 3 命 令 。 利 用 吸附 功能 , 层 的 调整 都 会 按 【 间 隔 ] 文 本 
框 中 的 设置 值 确定 吸附 距离 。 
不 管 网 格 是 否 可 见 ,【 靠 齐 到 网 格 ] 功 能 都 可 以 打开 。 
设置 网 格 和 网 格 对 齐 的 吸附 值 操作 如 下 。 
(1) 选择 [查看 】I【 网 格 3I【 网 格 设置 ] 命 令 . 打 开 如 图 13. 14 所 示 的 【网 格 设置 对 话 框 。 
(2) 根据 需要 设置 以 下 选项 。 
e 颜色 :用 于 设置 网 格 线 的 颜色 。 
e 间隔 :此 文本 框 用 于 设置 网 格 线 的 间隔 和 间隔 单位 。 
@ 显示 :该 选项 组 中 的 单 选 按钮 用 于 设置 网 格 以 线 还 是 以 点 来 显示 。 
(3) 单 击 [确定 了 按钮 完成 设置 。 
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图 13.13 显示 网 格 线 
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图 13. 14 【网 格 设置 ] 对 话 框 





13. 3.4 命名 层 


在 创建 层 时 ,Dreamweaver 8 会 自动 为 层 命名 :Layerl、Layer2 和 Layer3 等 , 且 每 个 层 的 


名 称 都 是 惟一 的 ,可 以 通过 [属性 面板 来 更 改 层 名 称 。 下 面 介绍 怎样 通过 【层面 板 来 重 命 : 
名 层 的 名 称 。 具 体操 作 如 下 。 . 
(1) 选择 [窗口 3I【 层 命令 ,打开 [层面 板 。 。 


按 F2 键 ,可 快捷 地 打开 【层面 板 。 

(2) 在 【层面 板 中 选择 一 个 层 , 则 [层面 板 上 相应 的 层 的 名 称 呈 高 亮 显示 ,表明 该 层 处 
于 被 选中 状态 ,用 鼠标 双击 层 名 称 , 则 该 层 名 称 处 于 被 编辑 状态 ,此 时 就 可 以 修改 
该 层 的 名 称 了 。 图 13. 15 所 示 为 更 改 Layer4 层 的 名 称 。 

如 果 在 编辑 窗口 中 某 一 层 处 于 编辑 状态 , 则 在 【层面 板 上 该 层 的 名 称 会 以 粗 体 
方式 显示 。 当 在 编辑 窗口 中 编辑 Layer2 层 时 .【 层 面板 中 Layer2 显示 效果 如 
图 13.16 所 示 。 











Layer2 
Layerl 





图 13.15 重 命名 层 图 13.16 编辑 层 


13.3.5 调整 层 与 层 的 相对 位 置 
在 13.1 节 中 介绍 过 , 层 位 于 Z 轴 上 。 一般 情况 下 ,最 先 建立 的 层 位 于 Z 轴 的 最 下 层 , 最 


后 建立 的 层 位 于 Z 轴 的 最 上 层 。 这 样 的 排序 可 以 从 【层面 板 的 Z 值 看 出 来 ,如 图 13. 17 
所 示 。 


Layer4 


Layer3 
Layer2 
Layerl 





图 13.17 层 Z 轴 的 顺序 值 


下 面 就 利用 [层面 板 调整 层 间 的 相对 位 置 。 

(1) 把 鼠标 指针 移 到 要 改变 Z 轴 上 位 置 的 层 名 称 上 , 拖 动 Layer4 到 Layerl 下 面 ,如 
图 13. 18 所 示 。 

(2) 释放 鼠标 ,Layer4 便 移 到 最 底 端 ,如 图 13. 19 所 示 。Layer4 的 Z 值 由 4 变 为 1, 表 
示 它 现在 位 于 其 他 3 个 层 的 下 面 ,而 其 他 层 的 Z 值 都 增加 了 1。 
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图 13.18 ” 拖 动 改变 层 顺 序 图 13.19 Layer4 处 于 最 底层 


13.3.6 显示 与 隐藏 层 


通过 控制 层 的 显示 与 隐藏 ,可 以 改变 网 页 的 内 容 。 控 制 层 的 显示 与 隐藏 仍然 在 【层面 
板 上 完成 。 

打开 [层面 板 , 单 击 面板 上 的 妇 图 标 , 即 可 切换 全 部 层 的 显示 或 隐藏 状态 ,如 图 13. 20 
所 示 显 示 所 有 层 , 如 图 13. 21 所 示 隐 藏 所 有 层 。 

也 可 以 改变 某 个 层 的 显示 或 隐藏 状态 。 方 法 是 在 层 名 称 左 侧 的 络 或 址 图 标 上 单 击 , 即 
可 在 隐藏 或 显示 状态 之 间 切 换 , 如 图 13. 22 所 示 。 

如 果 没 有 了 眼睛 图 标 , 层 继承 其 父 层 的 可 见 性 (如 果 不 是 嵌 套 层 , 父 层 就 是 网 页 文件 主体 ， 
总 是 可 见 的 ) 。 








图 13.20 显示 全 部 层 图 13.21 隐藏 全 部 层 
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图 13.22 切换 单个 层 的 显示 或 隐藏 状态 


13. 3.7 层 的 嵌 套 


谋 套 层 是 在 一 个 层 内 部 再 创建 一 个 层 ,创建 方法 与 前 面 介绍 创建 层 的 方法 一 样 。 赃 套 
层 的 目的 通常 是 将 层 组 合 在 一 起 , 赃 套 层 会 随 其 父 层 一 起 移动 ,还 可 以 对 其 进行 设置 ,使 之 
继承 父 层 的 可 见 性 。 
在 网 页 上 绘制 层 时 ,如 果 想 让 层 自动 谋 套 ,可 以 通过 设置 【 层 ] 参 数 来 实现 。 选 择 【 编 辑 】 
I【 首 选 参数 ] 命 令 , 然 后 选择 【 层 】 选 项 并 选中 【 嵌 套 ] 复 选 框 。 这 样 ,在 其 他 层 内 部 绘制 的 层 
都 将 自动 典 套 。 详 细 介绍 参见 13. 3. 8 节 。 
使 用 [层面 板 创 建 庶 套 层 的 操作 如 下 。 
(1) 选择 [窗口 ] 民 层 ] 命 令 或 按 F2 键 , 打 开 【 层 面板 。 
(2) 在 【 层 ] 面 板 中 选中 一 个 层 , 然 后 按 住 Ctrl 键 ,并 在 【层面 板 中 将 该 层 拖 到 目标 
层 上 。 
(3) 当 一 个 方 框 出 现在 目标 层 周 围 时 ,如 图 13. 23(a) 中 【层面 板 所 示 ,释放 鼠标 即 可 ， 
这 时 在 【 层 了 面板 中 层 Layer4 就 以 缩 进 显 示 , 如 图 13. 23(b) 所 示 。 
(4) 注意 在 编辑 窗口 中 组 套 层 的 位 置 关系 也 会 发 生 相 应 变化 ,因为 其 位 置 是 相对 于 其 
父 层 的 位 置 来 确定 的 。 





(a) 嵌 套 前 位 置 关 系 (b) 嵌 套 后 位 置 关 


图 13.23 创建 嵌 套 层 


13.3.8 改变 层 的 默认 设置 


使 用 层 参 数 可 以 重新 定义 新 建 层 的 默认 设置 。 选 择 【 编 辑 】 民 首选 参数 命令 ,然后 选择 
【 层 ] 选 项 来 编辑 层 参 数 的 设置 ,如 图 13. 24 所 示 。 


显示 :设置 创建 层 时 “可 见 性 ”的 默认 值 。 主 要 包括 default( 默 认 )、inherit (继承 )、 
visible( 可 见 ) 和 hidden( 隐 藏 ) 。 选 择 default, 则 根据 各 个 浏览 器 软件 的 层 设置 来 决 
定 层 的 显示 或 隐藏 ,在 IE 4 以 上 版 本 中 默认 设置 为 可 见 ; 选 择 inherit, 则 根据 层 骨 套 
的 父 层 的 可 见 性 来 决定 显示 或 隐藏 ;选择 visible, 则 会 自动 显示 层 ;选择 hidden ,将 
隐藏 绘制 的 层 。 

宽 和 高 :这 两 个 文本 框 用 来 设置 通过 [插入 】I【 层 命令 创建 的 层 的 默认 宽度 和 高 度 ， 
默认 值 为 200 像素 X115 像素 。 

背景 颜色 图: 从 颜色 框 中 指定 层 的 默认 背景 颜色 。 

背景 图 像 :指定 默认 的 层 的 背景 图 像 。 单 击 【浏览 3 按钮 可 以 查找 计算 机 上 的 图 像 文 
件 , 或 在 文本 框 中 输入 图 像 文 件 的 路 径 。 

赃 套 :选中 此 复 选 框 ,可 使 已 有 层 的 区 域内 绘制 的 层 成 为 说 套 层 。 如 果 不 选 中 该 复 
选 框 ,绘制 层 时 按 住 Alt 键 ,可 以 实现 层 谋 套 操作 。 

Netscape 4 兼容 性 :选中 此 复 选 框 ,可 解决 一 个 Netscape Navigator 4. x 浏览 器 中 由 
到 的 问题 , 即 当 用 户 调整 窗口 大 小 时 造成 层 丢 失 其 位 置 的 问题 。 方 法 是 每 当 调整 浏 
览 器 窗口 的 大 小 时 ,JavaScript 强迫 网 页 重新 加 载 ,将 层 重 新 安排 到 正确 的 位 置 。 也 
可 以 添加 或 删除 JavaScript, 方 法 是 选择 【命令 3I【 增 加 / 移 除 Netscape 调整 修复 】 


命令 。 
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WD: Em 
商品: [5 
mam CDL 
RR OD) 
从 二， 门 扣 在 攻 中 则 民风 内 者) 
ttewpe + 要 性 ， 口 拓 和 是 加 下 大 小 加 








图 13.24 设置 层 的 参数 
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13.4 层 与 表格 的 转换 


设计 网 页 时 ,用 层 来 定位 网 页 的 图 像 或 文字 比较 精确 、 轻 松 , 而 用 表格 来 放置 这 些 元 素 
则 比较 稳定 。Dreamweaver 8 提供 了 层 与 表格 的 互 换 功 能 ,可 以 根据 需要 来 选择 层 或 表格 ， 
以 调整 布局 ,优化 页 面 设计 。 


13. 4.1 把 层 转 换 为 表格 


在 把 层 转换 为 表格 之 前 ,必须 使 层 不 发 生 重 有 ,原因 是 表格 不 具有 Z 轴 的 特性 。 方 法 是 
在 【层面 板 中 选中 [防止 重 释 ] 复 选 框 ,如 图 13. 25 所 示 , 防 止 层 重 释 。 如 果 已 经 建立 了 重 秋 
的 层 , 则 要 通过 移动 把 它们 分 开 。 

将 层 转换 为 表格 的 操作 如 下 。 

(1) 选择 [修改 】I[ 转 换 】I【 层 到 表格 命令 ,如 图 13. 26 所 示 。 

(2) 在 弹出 的 [转换 层 为 表格 ] 对 话 框 中 ,设置 各 个 选项 ,如 图 13. 27 所 示 。 




















图 13.26 将 层 转换 为 表格 





图 13.25 防止 层 重叠 的 设置 





口 置 于 页 面 中 央 (C) 


布局 工具 : [防止 层 重 矢 @) 
口 显 示 层 面板 () 
口 显示 网 格 @) 
口 靠 齐 到 网 格 四 

















图 13. 27 【转换 层 为 表格 ] 对 话 框 





【表格 布局 ] 选 项 组 的 设置 ; 


最 精确 :此 单 选 按钮 用 于 给 每 一 个 层 建立 一 个 单元 表格 。 附 加 单元 格 用 于 填充 
层 之 间 的 空间 。 

最 小 :合并 空白 单元 :选择 此 单 选 按钮 , 层 转换 为 表格 后 空 行 . 空 列 最 少 ,表格 将 
变 得 简洁 。 

使 用 透明 GIF :选中 此 复 选 框 , 则 会 用 透明 的 GIF 图 像 填充 表格 的 最 后 一 行 ,这 
样 ,在 不 同 的 浏览 器 中 表格 的 显示 相同 。 

置 于 页 面 中 央 : 选 中 此 复 选 框 , 则 会 使 表格 在 页 面 中 居中 对 齐 ; 否 则 表格 会 与 页 
面 的 左边 对 齐 。 


【布局 工具 3 选项 组 的 设置 


防止 层 重生 :选中 此 复 选 框 可 防止 层 重 又。 

显示 层面 板 :选中 此 复 选 框 , 则 在 转换 为 表格 后 显示 【层面 板 。 
显示 网 格 :选中 此 复 选 框 , 则 在 转换 为 表格 后 显示 网 格 。 

靠 齐 到 网 格 :选中 此 复 选 框 , 则 在 转换 为 表格 后 打开 靠 齐 功能 。 


(3) 完成 设置 后 单 击 【确定 了 按钮 , 层 转 换 为 表格 的 结果 如 图 13. 28 所 示 。 


13. 4.2 




















图 13. 28 层 转 换 为 表格 


把 表格 转换 为 层 


如 果 对 页 面 布局 不 满意 ,可 以 把 表格 转换 为 层 后 重新 调整 。 具 体操 作 如 下 。 
(1) 选择 [修改 】I[ 转 换 〗I【 表 格 到 层 ] 命 令 。 
(2) 在 弹出 的 [转换 表格 为 层 ] 对 话 框 中 ,根据 需要 选中 各 复 选 框 ,如 图 13. 29 所 示 。 
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图 13.29 【转换 表格 为 层 ] 对 话 框 


(3) 单 击 [确定 了 按钮 ,完成 表格 到 层 的 转换 。 


13.5 制作 层 网 页 


用 层 布 局 网 页 是 目前 逐渐 流行 的 一 种 网 页 布局 方法 ,结合 使 用 CSS 样式 表 技 术 可 以 制 
作出 很 多 构思 别致 的 页 面 。 用 Dreamweaver 8 提供 的 层 功 能 布局 网 页 比 表 格 操作 起 来 更 简 
单 、 更 灵活 。 但 使 用 层 布局 网 页 时 应 注意 下 面 两 个 问题 。 

@ 层 虽 然 在 网 页 布局 方面 比 表格 有 更 多 优点 ,但 层 的 位 置 容易 移动 ,在 浏览 器 中 显示 

的 效果 往往 与 在 编辑 窗口 中 显示 的 效果 会 有 所 不 同 。 为 避免 这 种 现象 可 以 使 用 层 
嵌 套 方法 ,由 一 个 层 控制 全 部 元 素 ,然后 在 其 中 插入 内 套 层 ,实现 位 置 的 相对 控制 。 
@ 当 页 面 插入 很 多 层 时 ,相互 释 加 ,控制 起 来 非常 麻烦 ,这 时 利用 【层面 板 可 以 准确 操 


作 层 。 
下 面 将 通过 一 个 实例 介绍 层 布 局 网 页 的 方法 ,制作 的 层 布局 网 页 效果 如 图 13. 30 所 示 。 
具体 操作 步骤 如 下 。 








图 13.30 层 布 局 的 网 页 效果 


(1) 首先 ,收集 和 制作 好 网 页 要 使 用 的 图 像素 材 ,如 图 13. 31 所 示 。 网 页 制作 前 期 工作 
非常 繁杂 ,为 了 方便 学 习 , 用 户 可 以 使 用 光盘 提供 的 素材 直接 使 用 。 
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图 13.31 网 页 需要 的 素材 图 像 


(2) 启动 Dreamweaver 8 ,新 建文 档 , 保 存 为 index. html。 为 方便 操作 ,动手 前 需要 设置 
两 个 参数 。 
@ 选择 [编辑 】I【 首 选 参数 命令 ,打开 【首选 参数 】 对 话 框 ,在 【 层 ] 分 类 设置 中 , 选 
中 [如果 在 层 中 则 使 用 嵌 套 了 复 选 框 ,如 图 13. 32 所 示 。 这 样 在 一 个 层 上 面 绘 制 
新 层 , 则 该 层 自 动 嵌 套 在 下 面 的 层 中 。 
@ 选择 [窗口 I【 层 命令 ,打开 [层面 板 , 取 消 选 中 [防止 重 释 ] 复 选 框 ( 默 认 状 态 
为 选中 ), 这 里 就 可 以 实现 层 巾 套 ,如 图 13. 33 所 示 。 





L153 








图 13.32 【首选 参数 ] 对 话 框 图 13.33 【层面 板 


(3) 插入 一 个 层 , 然 后 在 [属性 面板 中 设置 层 大 小 和 位 置 ,并 在 【层面 板 中 重 命名 层 为 
“all”, 具 体 参数 设置 如 图 13. 34 所 示 。 最 后 把 光标 置 于 层 内 ,插入 背景 图 像 ,效果 如 
图 13. 34 所 示 。 

(4) 在 all 层 中 嵌 套 几 个 层 ,并 插入 相应 的 图 像 ,详细 设置 如 图 13. 35 所 示 。 








图 13.34 插入 最 外 层 图 13.35 第 1 级 嵌 套 层 


(5) 在 book 层 中 再 赔 套 4 个 层 ,在 其 中 的 left 和 right 层 中 插入 图 像 ,效果 如 图 13. 36 所 示 。 
(6) 在 left 层 中 再 嵌 套 4 个 层 ,分 别 在 其 中 插入 图 像 , 效 果 如 图 13. 37 所 示 。 





图 13.36 第 2 级 嵌 套 层 图 13.37 第 3 级 嵌 套 层 


(7) 在 right 层 中 再 嵌 套 3 个 层 , 同 时 设置 block 一 { 层 背景 色 为 # F7F7F7 ,并 在 其 中 再 
骸 套 一 个 层 , 用 来 插入 图 像 ; 设 置 block 一 b 层 背 景色 为 # F7F7F7 ,并 在 其 中 再 嵌 套 
一 个 层 , 用 来 插入 图 像 ;效果 如 图 13. 38 所 示 。 

(8) 此 时 ,网 页 布局 效果 基本 完成 ,当然 后 面 的 工作 就 是 为 该 页 面 增加 文字 信息 ,同时 
设置 链接 ,本 例 就 不 再 深入 ,编辑 效果 如 图 13. 39 所 示 。 




















my 





13.38 第 3 级 和 第 4 级 嵌 套 层 图 13.39 层 布局 的 网 页 效果 
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(9) 为 了 制作 精美 效果 ,本 例 素 材 图 像 大 部 分 是 保存 为 PNG 格式 ,在 第 5 章 中 曾 详 细 
比较 了 各 种 不 同 格式 的 网 页 图 像 特 点 ,使 用 PNG 格式 图 像 能 够 制作 半 透 明 、 羽 化 
等 特殊 处 理 效果 ,用 GIF 也 能 制作 透明 效果 ,但 比较 简单 ,设计 不 出 特殊 效果 。 
但 另 一 个 难题 又 摆 在 面前 ,IE 浏览 器 不 支持 PNG 格式 图 像 透明 效果 ,如 图 13. 40 
所 示 。 虽 然 其 他 浏览 器 支持 该 功能 ,但 对 于 绝 大 部 分 使 用 IE 的 用 户 来 说 实现 是 一 
个 遗憾 。 
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(a)IE 浏览 器 (b) Mozilla Firefox 浏览 器 


13. 40 ”不同 浏览 器 解析 透明 背景 的 PNG 格式 图 像 效 果 
(10) 在 网 页 中 增加 下 面 代码 可 以 解决 这 一 技术 缺陷 ,不 理解 Javascript 脚本 的 用 户 可 以 直 
接 在 二 head 之 和 去 /head 一 中 间 输 入 即 可 ,输入 并 保存 则 浏览 效果 如 图 13. 41 所 示 。 


< script language= "javascript" type= "text/javascript"> 
function correctPNG() 

{ 

for (var i= 0; i< document. images. length; i+ + ) 
时 

Var img = document.images [i] 

Var imgName = img.src.toUpperCase() 

if (imgName.substring (imgName.length- 3, imgName.length) = = "PNG") 
{ 
var imgID= (img.id) ?3"id= '"+ img.id+ "™":" 
var imgclass = (img.className) ? "class= '"+ img.className + ™":"™ 


var imgTitle= (img.title) ? "title= '"+ img.title+ "'":"title= '"+ 
img.alt+ mm 

var jmgStyle = _ "display:inline- block;"+ img.style.cssText 

if (img.align= = "left") imgStyle = "float:left;"+ imgstyle 

if (img.align = = "right") imgstyle = "float:right;"+ imgstyle 


if (img.parentElement .href) imgStyle = "cursor:hand;" + imgstyle 

var strNewHTML = "< span "+ imgID+ imgClass + imgTitle 

+ "style= ”"+ "width:"+ img.width+ "px; height:"+ img.height + " 
px"+ imgStylet+ ";" 

+ "filter:progid:DXImageTransform.Microsoft.AlphaImageloader" 

+ "(src= "+ img.src+ ™, sizingMethod= 'scale');”> < /span> " 
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img-outerHTML = strNewHIML 
= i 1 
} 
} 
} 
window.attachEvent ("onload", correctPNG); 
< /script> 








图 13.41 用 脚本 破解 IE 浏览 器 不 支持 透明 PNG 格式 








a 夺 呈 性 
= 本 章 内 容 包 括 : 
全 制作 跳 转 菜单 


全 制作 自由 拖 动 层 

全 改变 层 的 显示 属性 

全 制作 可 翻转 的 链接 按钮 
全 在 状态 栏 上 显示 信息 
全 制作 提示 对 话 框 

全 显示 和 隐藏 层 





本 章 要 点 : 

动态 交互 式 网 页 不 但 能 够 实现 复杂 的 动态 效果 
引起 浏览 者 的 兴趣 。Dreanmmweaver 8 提供 了 多 种 实现 动态 与 交互 网 页 的 功能 ,例如 ,通过 [行为 了 
执行 指定 的 动作 来 实现 各 种 动态 效果 


.还 能 实现 友好 的 人 机 交互 ,因此 更 容易 











14.1 制作 跳 转 菜单 


在 Dreamweaver 8 中 ,利用 【 跳 转 菜单 了 行为 或 表单 对 象 可 以 设计 弹出 式 下 拉链 接 列表 。 
下 拉 菜 单 中 的 每 个 选项 都 定义 一 个 超 链接 。 当 浏览 者 选择 菜单 中 的 选项 时 ,就 如 同 单 击 网 
页 中 的 超 链接 文本 一 样 , 跳 转 到 选项 所 定义 的 目标 网 页 。 当 然 ,还 可 以 利用 它 链接 图 片 \ 文 
档 等 对 象 。 

这 是 链接 的 一 种 特殊 形式 。 它 不 仅 丰富 了 网 页 中 超 链接 的 形式 ,同时 最 大 限度 地 节省 
了 版 面 。 在 制作 网 页 时 ,如 果 页 面 布 局 比较 紧张 ,可 以 使 用 它 将 一 些 不 太 重要 的 链接 进行 归 
类 集中 ,如 图 14. 1 所 示 的 网 页 上 的 “友情 链接 ”下 拉 菜 单 链接 组 。 











图 14.1 网 页 中 的 跳 转 菜单 

要 定义 跳 转 菜单 ,可 按 下 列 步骤 进行 操作 。 

(1) 启动 Dreamweaver 8, 新 建 或 打开 事先 准备 好 的 文档 ,将 鼠标 指针 定位 到 预定 义 位 
置 , 选 择 [ 插 入 〗I【 表 单 】I【 跳 转 菜单 命令 ,打开 [插入 跳 转 菜 单 对 话 框 ,如 图 14. 2 
所 示 。 

(2) 在 [文本 3 文本 框 中 输入 第 一 个 选项 的 名 称 , 如 “百度 搜索 ”。 

(3) 在 【选择 时 , 转 到 URL] 文 本 框 中 输入 要 连接 站 点 的 URL 地 址 ,如 “http://www. 


baidu. com/”。 








图 14. 2 【插入 跳 转 菜单 ] 对 话 框 


如 果 要 链接 的 对 象 不 是 已 存在 的 站 点 或 网 页 ,而 是 自己 制作 的 一 个 网 页 ,可 单 击 【 济 
览 ] 按 钮 ,打开 【选择 文件 ] 对 话 框 ,在 【查找 范围 〗 下 拉 列 表 框 中 选择 要 链接 的 文件 ,然后 单 
击 【确定 了 按钮 ,如 图 14. 3 所 示 。 
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相对 于 | 文 交 司 wuiued- 
要 使 用 此 选项 ， 请 保存 文件 . 


图 14.3 【选择 文件 ] 对 话 框 





(4) 从 图 14.2 中 的 [打开 URL 于 下 拉 列 表 框 中 选择 目标 链接 的 显示 位 置 。 


如 果 所 制作 的 网 页 中 带 有 框架 ,该 列表 框 中 将 有 多 个 选项 可 供 选 择 , 如 图 14.4 所 示 。 
在 其 中 可 以 选择 要 显示 链接 对 象 的 框架 。 如 果 网 页 中 没有 框架 ,该 下 拉 列 表 框 中 只 有 一 
个 【 主 窗口 ] 选 项 可 供 选 择 ,被 链接 的 网 页 将 在 当前 窗口 中 被 打开 。 


(5) 在 【菜单 名 称 】 文 本 框 中 为 该 控件 设置 一 个 名 称 。 该 名 称 将 显示 在 【属性 了 面板 中 ， 
同时 将 在 脚本 中 引用 。 

(6) 要 插入 新 的 链接 选项 ,可 单 击 对 话 框 中 的 加 号 按钮 ,在 【菜单 项 ] 列 表 框 中 加 入 一 个 
新 的 选项 ,如 图 14. 5 所 示 。 用 同样 的 方法 设置 该 选项 的 名 称 和 链接 即 可 。 





过 ， 秘 到 nL 








打开 tm 于- [ 主 吕 
村 
建 项 ， 口 竺 单 之 后 白人 而 生 作 团 
口 Wr mr 后 开间 下 天 上 口 了 mr 后 过 反 第 一 个 于 目 





图 14.4 选择 显示 位 置 图 14.5 插入 新 的 菜单 选项 


山 ? 外 


和 
动 
网 
页 








该 对 话 框 还 提供 了 两 个 复 选 框 ,用 于 对 跳 转 菜 单 进行 特殊 的 设置 。 

e@ 菜单 之 后 插入 前 往 按钮 :选中 该 复 选 框 后 ,创建 的 跳 转 菜单 后 面 将 出 现 一 个 [前 
往 3 按 钮 ,如 图 14. 6 所 示 。 选 择 下 拉 列 表 中 的 选项 后 , 单 击 【前 往 了 按钮 , 才 可 打 
开 链 接 的 网 页 。 

@ 更 改 URL 后 选择 第 一 个 项 目 :选中 该 复 选 框 后 ,无 论 是 否 选择 过 其 他 选项 , 跳 
转 菜单 将 始终 显示 第 一 个 选项 。 若 不 选中 该 复 选 框 , 则 跳 转 菜单 将 显示 上 一 次 





选择 的 选项 。 
(7) 完成 所 有 选项 的 设置 后 ,如 图 14. 2 所 示 , 单 击 【 确 定 ] 按 钮 即 可 在 网 页 当前 位 置 插入 
一 个 跳 转 菜单 表单 对 象 。 


保存 定义 有 跳 转 菜单 的 网 页 ,在 Dreamweaver 8 中 选择 【文件 了 民 在 浏览 器 中 浏览 〗| 
IExplore 6. 0 菜单 命令 ,启动 Internet Explorer 6 浏览 器 进行 预览 (会 根据 操作 系统 安装 
的 Internet Explorer 浏览 器 版 本 确定 )。 跳 转 菜 单 与 其 说 是 菜单 ,不 如 说 是 下 拉 列 表 框 。 
单 击 下 拉 列 表 框 的 下 三 角 按钮 ,就 可 打开 其 下 拉 列 表 , 浏 览 效果 如 图 14.7 所 示 。 


ETOETOECTIETOETII 
国民 四 国 国 的 Pr 次 wm 


地 址 加 ) 外 cDecments aod Setunes\zharinbon 圈 回 负 到 撤 护 








百度 横 索 国 [前往 ] 
图 14.6 ” 带 有 [前 进 ] 按 钮 的 跳 转 菜单 图 14.7 预览 跳 转 菜单 





本 节 所 讲述 的 跳 转 菜单 实际 上 是 通过 在 [列表 /菜单 控件 中 加 入 一 个 【 跳 转 菜单 行为 
来 实现 的 。 可 通过 编辑 该 行为 ,在 菜单 中 加 入 新 的 选项 ,也 可 删除 已 有 的 选项 或 修改 选项 的 
链接 和 名 称 ,操作 方法 如 下 。 
(1) 在 文档 窗口 中 选中 跳 转 菜单 ,并 选择 [窗口 3〗I【 行 为] 命令 ,打开 [行为 面板 ,如 
图 14. 8 所 示 。 在 【行为 3 面板 中 ,可 以 看 到 所 有 与 所 选 对 象 有 关 的 行为 ,如 本 例 中 
的 [ 跳 转 菜单 3 行为 。 
(2) 双击 【 跳 转 菜单 选项 ,打开 [ 跳 转 菜单 ] 对 话 框 ,如 图 14. 9 所 示 。 
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图 14.8 【行为 ] 面 板 国 9 帮 机 二 某 记 和 和 六 


(3) 在 [ 跳 转 菜单 ] 对 话 框 的 [菜单 项 ] 列 表 框 中 ,选择 某 一 选项 ;在 [文本 ] 文 本 框 和 [ 选 
择 时 , 转 到 URL] 文 本 框 中 更 改选 项 的 名 称 和 链接 。 若 要 加 入 新 的 选项 ,可 单 击 到 
按钮 。 

如 果 想 改变 各 选项 的 先后 顺序 ,只 需 选 中 该 选项 ,然后 单 击 对 话 框 中 的 避 | 或 人 按钮 上 
下 调整 在 下 拉 列 表 中 的 排列 顺序 。 


此 外 ,还 可 以 直接 在 该 控件 的 [属性 面板 中 修改 跳 转 菜单 中 的 属性 ,具体 操作 步骤 如 下 。 
(1) 选中 跳 转 菜单 后 ,选择 [窗口 I【 属 性] 命令 ,打开 [属性 3 面板 ,如 图 14. 10 所 示 。 
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图 14. 10 【属性 ] 面 板 


(2) 单 击 【列表 值 3 按 钮 ,打开 [列表 值 ] 对 话 框 ,如 图 14. 11 所 示 。 

在 该 对 话 框 中 , 单 击 【 项 目标 签 3 列 中 的 菜单 名 , 便 可 修改 选项 的 名 称 ; 单 击 【 值 ] 列 中 的 
选项 , 便 可 修改 对 应 的 链接 地 址 。 若 要 添加 新 的 选项 ,可 单 击 加 号 按钮 国 , 如 图 14. 12 所 示 。 
同样 , 单 击 减 号 按钮 回 可 删除 选中 的 选项 ; 单 击 四 或 回 按钮 可 以 调整 选项 的 排列 顺序 。 
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图 14. 11 【列表 值 ] 对 话 框 图 14. 12 添加 新 的 选项 
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14.2 制作 自由 拖 动 层 


用 Dreamweaver 8 可 以 制作 出 具有 很 好 交互 性 的 网 页 ,例如 ,利用 拖 动 层 制作 拼图 游 
戏 , 如 图 14. 13 所 示 就 是 一 个 世界 杯 在 线 拼图 游戏 。 但 是 在 Dreamweaver 8 中 ,所 插入 的 层 ， 
在 用 浏览 器 浏览 时 ,一 般 情况 下 是 不 能 被 移动 的 ,而 拼图 游戏 本 身 要 求 每 张 图 片 都 能 够 自由 
移动 。 要 解决 这 个 问题 ,其 实 并 不 困难 ,因为 Dreamweaver 8 提供 了 一 个 【 拖 动 层 ] 行 为 , 利 
用 它 不 但 能 够 实现 层 的 拖 动 ,还 能 为 每 个 层 设置 目标 位 置 的 坐标 值 。 在 浏览 网 页 时 ,只 要 拖 
动 该 图 片 到 正确 的 位 置 附近 ,图 片 就 会 被 自动 * 吸 "到 坐标 点 上 。 





下 面 结合 【 拖 动 层 ] 行 为 介绍 拼图 游戏 的 制作 过 程 ,具体 操作 步骤 如 下 。 

(1) 在 制作 拼图 游戏 之 前 ,首先 要 找 一 幅 图 片 ,并 利用 Fireworks 或 其 他 图 形 处 理工 具 
将 图 片 切 分 成 多 块 ,如 图 14. 14(a) 所 示 将 一 张 完整 的 图 片 分 成 9 块 。 

(2) 把 图 像 导 出 为 网 页 文件 形式 ,例如 ,在 Fireworks 8 中 可 以 选择 [文件 3I【 导 出 3 命 
令 , 在 [导出 3 对 话 框 中 设置 [导出 ] 文 件 格式 为 [HTML 和 图 像 } 选 项 。 

(3) 启动 Dreamweaver 8, 新 建 或 打开 事先 准备 好 的 文档 ,选择 【插入 了 代 图 像 对 象 〗| Fire- 
works HTML 命令 ,在 网 页 中 插入 切 分 的 网 页 图 像 文 件 , 如 图 14. 14(b) 所 示 。 
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(a) 切 割 图 片 (b) 导 入 网 页 图 像 文 件 
图 14.14 制作 并 导入 图 像 切 片 
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(4) 把 表格 布局 的 图 像 转化 为 图 层 布 局 图 像 。 选 择 【 修 改 ] 代 转化 ] 民 表格 到 层 ] 命 令 ， 
把 插入 的 表格 图 像 文件 转化 为 层 布局 网 页 ,如 图 14. 15 所 示 。 

(5) 选择 [窗口 【行为 3 命令 ,打开 [行为 面板 。 

(6) 在 【标签 选择 器 内 选择 整个 网 页 标签 二 body 二 ,再 单 击 【行为 】 面 板 中 的 加 号 按钮 
出 ,弹出 一 个 菜单 ,如 图 14. 15 所 示 。 
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(7) 在 菜单 中 选择 [ 拖 动 层 ] 命 令 , 打 开 [ 拖 动 层 ] 对 话 框 ,如 图 14. 16 所 示 。 
(8) 在 【[ 层 J 下 拉 列 表 框 中 选择 要 设置 的 层 。 
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图 14. 16 【 拖 动 层 ] 对 话 框 


在 本 例 中 ,由 于 插入 了 9 个 层 , 在 该 对 话 框 中 依次 选择 这 9 个 层 , 并 分 别 设置 其 目标 位 
置 的 坐标 值 等 参数 。 


(9) 在 [移动 I 下拉 列表 框 中 选择 [不 限制 ] 选 项 。 , 
该 列表 框 提供 了 两 种 拖 动 方式 : @ 
。 【不 限制 7 为 不 受 限制 拖 动 ,可 将 层 拖 动 到 浏览 器 的 任何 位 置 。 
。 【限制 ] 为 受 限制 拖 动 ,选择 该 选项 后 对 话 框 如 图 14. 17 所 示 。 在 该 对 话 框 中 ， 
可 利用 [ 上] 下] 左右 了 选项 为 拖 动 层 设置 一 个 矩形 范围 ,这 样 浏览 者 就 
只 能 在 该 范围 内 拖 动 层 。 
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放下 目标 在 正 职 往 目 商 位 置 
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图 14.17 选择 [限制 ] 选 项 后 的 对 话 框 


(10) 在 【放下 目标 3 选项 组 中 的 【 左 ] 和 【上 ] 文 本 框 中 输入 层 目标 位 置 的 坐标 值 。 它 是 
指 每 个 图 片 在 目标 位 置 时 ,其 左上 角 的 坐标 值 。 


如 果 不 能 确定 该 坐标 值 ,可 用 下 面 的 方法 来 获取 坐标 值 。 

@ 选择 【查看 了 【标尺 【显示 了 命令 ,在 窗口 中 显示 出 标尺 ,并 将 鼠标 指针 移 到 单元 
格 的 左上 角 , 记 下 标尺 上 虚线 所 对 应 的 数值 。 其 中 项 部 标尺 显示 的 是 〖 左 】 文 本 框 
的 值 ,左面 标尺 显示 的 是 〖 右 】 文 本 框 的 值 。 

@ 先 将 层 拖 到 对 应 的 单元 格 中 ,并 用 键盘 上 的 方向 键 调 整 好 层 的 位 置 ; 然 后 打开 【 拖 
动 层 〗 对 话 框 , 单 击 【取得 目前 位 置 】 按 钮 , 即 可 自动 获取 该 图 片 的 坐标 值 。 


(11) 在 [ 靠 齐 距离 ) 文 本 框 中 设置 目标 点 的 允许 误差 范围 。 例 如 设 为 50, 表 示 如 果 图 片 
被 拖 动 到 距离 目标 位 置 小 于 50 个 像素 时 ,就 认为 已 经 拖 动 到 了 目标 点 上 。 
(12) 完成 设置 后 , 单 击 【确定 3 按钮 ,制作 的 拼图 游戏 效果 如 图 14. 18 所 示 。 











图 14.18 制作 的 拼图 游戏 效果 


经 过 以 上 设置 后 ,基本 上 已 经 能 够 实现 所 需要 的 功能 了 。 如 果 需 要 对 层 进行 更 进一步 
的 设置 ,例如 层 被 拖 动 后 的 层次 、 拖 动 到 目标 点 后 引发 的 动作 等 ,可 单 击 【高 级 了 标签 ,打开 
【高 级 选项 卡 ,如 图 14. 19(a) 所 示 。 





在 该 选项 卡 中 ,可 设置 的 选项 如 下 。 

。 拖 动 控制 点 :该 下 拉 列 表 框 用 于 设置 可 拖 动 的 区 域 ,其 默认 值 汶 [整个 层 】, 即 在 该 图 
片上 的 任何 位 置 都 可 以 拖 动 。 如 果 选 择 了 【 层 内 区 域 〗 选 项 , 则 对 话 框 如 图 14. 19(b) 
所 示 。 列 表 框 右 侧 的 [ 左 】【 上 】【 宽 ] 和 【高 ] 文 本 框 用 于 确定 拖 动 区 域 在 图 片上 的 
位 置 ,其 中 [ 左 ] 和 [上 ] 文 本 框 用 于 定位 拖 动 区 域 距 图 片 左 边 和 项 边 的 距离 ,【 宽 ] 和 
【高 ] 文 本 框 用 于 设置 拖 动 区 域 的 宽度 和 高 度 。 

® 拖 动 时 :在 该 选项 组 中 ,如 果 不 选 中 [将 层 移 至 最 前 ,然后 ] 复 选 框 ,在 拖 动 层 时 将 不 
改变 层 的 对 放 次 序 , 这 意味 着 它 有 可 能 被 其 他 层 忆 盖 ;如 果 选 中 该 复 选 框 ,并 在 后 面 
的 下 拉 列 表 框 中 选择 [ 留 在 最 上 方 选 项 , 则 层 在 拖 动 时 将 处 于 最 顶层, 释放 鼠标 后 ， 
该 层 也 将 变 为 顶层 ;如 果 选 择 [恢复 Z 轴 选 项 , 则 层 在 被 拖 动 时 处 于 顶层 , 放 开 鼠标 
指针 后 将 恢复 原来 的 层次 。 
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(a) 拖 动 整个 层 (b) 拖 动 层 内 指定 区 域 
图 14. 19 【高 级 ] 选 项 卡 
@ 呼叫 JavaScript: 该 文本 框 用 于 调用 JavaScript。 可 以 在 其 后 面 的 文本 框 中 输入 完整 
的 JavaScript 语句 。 同 时 该 选项 也 可 进行 某 函 数 的 调用 。 在 拖 动 层 时 系统 将 反复 执 
行 所 输入 的 语句 。 
@ ”放下 时 ,呼叫 JavaScript: 用 于 在 释放 鼠标 时 调用 JavaScript 语句 。 可 以 在 此 文本 框 
中 输入 JavaScript 语句 或 其 他 函数 。 所 输入 的 语句 或 函数 ,将 在 图 形 被 拖 动 完成 后 
执行 。 如 果 选 中 [只 有 在 靠 齐 时 】 复 选 框 , 则 只 有 当 图 形 被 拖 动 到 目标 位 先后 才能 执 
行 所 输入 的 语句 。 
利用 [高 级 】 选 项 卡 中 提供 的 这 种 可 调用 JavaScript 语句 的 功能 ,可 制作 巧妙 的 换 图 
效果 。 例 如 , 当 拖 动 该 层 到 目标 位 置 时 ,该 图 片 立刻 切换 为 其 他 图 片 。 所 输入 的 语句 如 
图 14. 20 所 示 。 








图 14.20 设置 换 图 功能 
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利用 上 述 方法 分 别 设置 好 剩余 的 8 幅 图 片 ,一 个 最 基本 的 拼图 游戏 就 完成 了 。 如 果 想 把 
游戏 做 得 更 好 一 些 , 可 在 其 中 加 入 一 些 动画 以 及 设置 [开始 ]【 重 玩 } 和 【结束 等 按钮 。 


14.3 改变 层 的 显示 属性 


在 Dreamweaver 8 中 ,利用 【改变 属性 了 行为 可 以 动态 地 改变 指定 对 象 的 某 些 属性 ,这 些 
属性 包括 背景 颜色 .尺寸 和 背景 图 片 等 。 制 作 网 页 时 ,如 果 用 这 种 行为 可 设置 一 些 特殊 的 区 
域 , 例 如 , 当 鼠 标 指针 经 过 某 个 区 域 时 ,该 区 域 的 背景 颜色 会 立即 发 生变 化 ; 当 鼠 标 指针 离开 
后 又 恢复 为 原来 的 背景 色 , 如 图 14. 21 所 示 导 航 按钮 效果 。 
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图 14.21 可 动态 改变 背景 颜色 的 导航 按钮 


如 图 14. 21 所 示 网 页 案例 就 是 利用 【改变 属性 了 行为 来 实现 动态 改变 层 的 背景 颜色 。 下 
面 通过 一 个 实例 介绍 增加 该 行为 的 方法 .具体 操作 步骤 如 下 。 

(1) 启动 Dreamweaver 8. 新 建 一 个 文档 。 打 开 【 插 入 了 面板 的 【布局 ] 选 项 面板 , 单 击 其 
中 的 [描绘 层 ] 按 钮 盘 , 在 页 面 上 夯 出 一 个 层 , 在 【属性 3 面板 中 设置 层 的 大 小 (120 像 
素 X40 像素 ) 和 位 置 (100 像素 X40 像素 ) 。 

(2) 将 鼠标 指针 定位 到 层 中 ,输入 链接 文本 并 在 [属性] 面板 中 设置 各 种 属性 ,包括 布局 
和 文本 格式 ,以 及 链接 目标 。 

(3) 选中 该 层 , 并 选择 [窗口 XI【 行 为 命令 ,打开 [行为 面板 。 

(4) 在 [行为 面板 中 单 击 加 号 按钮 志 , 打 开 命 令 列表 ,选择 [改变 属性 命令 ,如 图 14. 22 
所 示 。 





图 14. 22 增加 [改变 属性 ] 行 为 


提示 


如 果 所 使 用 的 浏览 器 是 Internet Explorer 5.0, 在 为 对 象 添加 行为 之 前 ,应 当 在 命令 列 
表 的 【显示 事件 】 子 菜单 中 选择 Internet Explorer 5. 0 命令 。 因 为 【改变 属性 】 行 为 在 Inter- 
net Explorer 4. 0 以 上 版 本 中 可 改变 的 对 象 属性 要 比 在 Internet Explorer 3. 0 和 Netscape 
Navigator 3. 0/4. 0 中 可 改变 的 属性 多 ;并 且 在 Internet Explorer 5.0 中 ,还 可 以 为 行为 设 
置 更 多 的 触发 事件 。 


(5) 打开 [改变 属性 对 话 框 ,如 图 14. 23 所 示 。 
(6) 在 [对 象 类 型 ] 下 拉 列 表 框 中 选择 DIV 选项 ,如 图 14. 23 所 示 。 


























图 14.23 选择 对 象 类 型 


在 该 下 拉 列 表 框 中 ,提供 了 所 有 可 设置 的 对 象 类 型 ,要 根据 具体 情况 选择 。 例 如 本 
例 中 要 改变 的 是 层 的 属性 ,所 以 应 选择 DIV 选项 ;如 果 要 设置 的 对 象 是 图 片 , 则 应 
选择 IMG 选项 。 

(7) 在 [命名 对 象 I 下 拉 列 表 框 中 列 出 文档 中 所 有 已 建立 的 层 , 在 其 中 选择 要 设置 的 层 ， 
如 “div "Layer3"”, 如 图 14. 24 所 示 。 
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图 14.24 选择 具体 层 


在 Dreamweaver 8 中 ,可 以 在 【属性 了 面板 中 为 每 个 层 命 名 ,如 果 不 为 各 层 命 名 ,系统 
将 按 层 建立 的 先后 顺序 依次 命名 为 layerl ,layer2 layer3 和 layer4 等 。 


(8) 在 【属性 】 选 项 组 中 选中 【选择 ] 单 选 按钮 ,并 在 右面 的 下 拉 列 表 框 中 选择 要 变更 的 
属性 。 这 里 选择 style. backgroundColor 选项 ,如 图 14. 25 所 示 。 在 该 下 拉 列 表 框 
中 ,能 够 被 改变 的 属性 包括 : 距 文 档 左 边界 的 距离 、 距 文档 顶部 的 距离 . 层 的 宽度 、 
层次 .背景 颜色 和 背景 图 片 等 。 

(9) 在 [新 的 值 ] 文 本 框 中 输入 要 改变 的 颜色 值 。 如 果 不 能 确定 要 改变 的 颜色 值 ,可 在 
【属性 了】 面板 中 单 击 【 背 景 颜 色 了 颜色 框 打开 调 色 板 ,将 吸管 移 到 要 选择 的 色 块 上 , 面 
板 的 底部 将 显示 出 该 颜色 的 值 。 
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图 14.25 选中 style. backgroundColor 选项 


(10) 完成 设置 后 单 击 【确定 了 按钮 ,关闭 对 话 框 。 

至 此 基本 完成 了 层 背景 颜色 变化 动作 的 设置 . 接 下 来 还 需要 设置 动作 的 触发 事件 。 默 
认 设置 下 ,系统 默认 onFocus 为 触发 事件 , 即 单 击 某 选 项 就 可 触发 事件 。 可 根据 需要 设置 其 
他 触发 事件 ,方法 如 下 。 

(1) 在 【行为 3 面板 中 , 单 击 要 更 改 触发 事件 的 行为 ,此 时 在 【事件 ] 列 的 末端 会 出 现 一 个 
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下 三 角 按 钮 。 
(2) 单 击 该 按钮 ,打开 下 拉 列 表 , 如 图 14. 26 所 示 。 





制 
作 
动 
网 
页 





图 14. 26 可 选择 的 触发 事件 
(3) 在 下 拉 列 表 中 单 击 要 使 用 的 触发 事件 ,如 onMouseOver, 该 动作 表示 当 鼠 标 指针 移 
动 到 对 象 上 时 触发 事件 。 其 他 常用 的 触发 事件 说 明 如 表 14. 1 所 示 。 
表 14.1 触发 事件 的 动作 及 其 含义 





























动 作 说 明 
onClick 单 击 鼠标 时 触发 动作 

es 当 和 鼠标 指针 按 下 时 触发 动作 ， 
onMouseMove 当 鼠 标 指针 移动 时 触发 动作 
onMouseOut 当 鼠 标 指针 移 开 时 触发 动作 : 
OMe er 当 和 鼠标 指针 移动 到 对 象 上 面 时 触发 动作 
onLoad 当 调用 对 象 时 触发 动作 : 
ouldeyDicss 按 下 键盘 上 的 任意 键 可 触发 动作 : 
onDblClick 双击 对 象 可 触发 动作 。 





保存 文档 后 , 按 下 F12 键 打开 浏览 器 来 测试 刚才 所 做 的 设置 。 此 时 如 果 所 做 的 设置 都 中 
正确 ,那么 当 鼠 标 指针 移动 到 层 上 时 , 层 立 刻 会 改变 背景 颜色 。 但 在 鼠标 指针 移 开 时 并 不 能 
恢复 原来 的 颜色 ,这 也 是 该 行为 的 一 个 不 足 之 处 。 因 此 ,为 了 达到 预期 的 目的 ,还 必须 再 为 。 
该 层 设置 一 个 行为 ,使 其 能 够 在 鼠标 指针 移 开 时 恢复 原来 的 颜色 。 : 

理解 了 【改变 属性 ] 行 为 的 使 用 方法 后 ,要 完成 这 样 的 设置 其 实 并 不 难 。 仍 可 使 用 该 行 @ 
为 ,只 是 在 【改变 属性 】 对 话 框 中 设置 背景 颜色 时 要 选择 层 原 来 的 颜色 ,然后 再 改变 一 下 触发 
事件 即 可 ,具体 操作 步骤 如 下 。 

(1) 选中 层 , 打 开 【 行 为 了 面板 。 

(2) 单 击 面板 中 的 加 号 按钮 本 .在 打开 的 下 拉 菜 单 中 选择 [改变 属性 命令 ,打开 【改变 








属性 ] 对 话 框 。 

(3) 在 【对 象 类 型 J 下拉 列表 框 中 选择 DIV 选项 。 在 【属性 】 选 项 组 中 选中 [选择] 单 选 按 
钮 ,并 在 右 侧 的 下 拉 列 表 框 中 选择 style backgroundColor 选项 。 

(4) 设置 [新 的 值 ] 为 层 原来 的 颜色 ,如 #FCCFF。 单 击 【确定 3 按钮 。 

(5) 在 【行为 3 面板 中 选中 新 加 入 的 行为 , 单 击 右 侧 的 下 三 角 按 钮 ,在 打开 的 下 拉 列 表 中 
选择 onMouseOut 选项 , 它 是 指 当 鼠 标 指针 移 开 指定 对 象 时 的 触发 事件 。 

(6) 保存 设置 后 ,再 次 按 下 F12 键 预 览 。 此 时 如 果 设 置 正 确 , 当 鼠标 指针 移 到 层 上 时 ， 
层 将 改变 颜色 ;一 旦 鼠标 指针 移 开 层 , 即 可 恢复 原来 的 颜色 。 





在 用 Dreamweaver 8 制作 本 例 时 ,由 于 新 建文 件 中 系统 自动 在 源 代码 中 加 入 下 面 两 
行 代码 ,用 于 声明 文档 版 本 和 信息 ,但 XHTML 1.0 版 本 会 限制 该 动作 的 执行 。 建 议 切 换 
到 [代码 视图 删除 文档 项 部 的 这 两 行 代码 ,否则 会 在 浏览 时 没有 预期 效果 。 


< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1 0 Transitional//EN" 
"http://www w3, orgVTR/xhtml1/DTD/xhtml1- transitional dtd"> 





在 选择 动作 的 触发 事件 之 前 ,如 果 使 用 的 浏览 器 为 Internet Explorer 5.0, 则 一 定 要 在 
【行为 ) 面 板 中 的 命令 菜单 的 【显示 事件 3 子 菜单 中 选择 IE 5. 0 命令 。 这 样 便 可 使 用 比 In- 
ternet Explorer 4.0 更 多 的 触发 事件 ,如 图 14.27 所 示 。 
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图 14. 27 【显示 事件 ] 子 菜单 


Dreamweaver 8 中 其 他 触发 事件 的 含义 及 其 所 适用 的 浏览 器 可 参见 表 14.2 (本章 最 


试 一 试 

改变 层 距 文档 左边 框 的 距离 ,并 设置 触发 事件 为 onMouseMove。 

@ 在 页 面 上 画 一 个 层 ,并 在 其 中 加 入 文字 或 图 片 等 对 象 。 

@ 打开 【行为 】 面 板 , 单 击 加 号 按钮 下 .在 打开 的 菜单 中 选择 [改变 属性 了】 命令 ,打开 
【改变 属性 】 对 话 框 。 

图 在 【对象 类 型 】 下 拉 列 表 框 中 选择 DIV 选项 。 

图 在 【命名 对 象 】 下 拉 列 表 框 中 选择 DIV 选项 。 

@ 在 [属性 〗 选 项 组 中 选中 【选择 ] 单 选 按钮 ,并 在 其 右 侧 的 下 拉 列 表 框 中 选择 
style. left 选项 。 

@@ 在 [新 的 值 ] 文 本 框 中 输入 要 设置 的 距离 。 

@ 单 击 [确定 】 按 钮 返回 到 【行为 面板 。 

单 击 【事件 】 列 右 侧 的 下 三 角 按 钮 ,在 打开 的 下 拉 列 表 中 选择 onMouseOver 选项 。 


14.4 制作 可 翻转 的 链接 按钮 


在 Dreamweaver 8 中 ,利用 交换 图 像 3 行 为 可 通过 改变 图 片 数据 源 的 属性 将 原 图 片 替 
换 为 另 一 幅 图 片 。 如 果 要 建立 一 个 可 翻转 的 链接 按钮 ,用 以 链接 到 某 个 网 站 ,可 以 选择 该 行 
为 。 当 移动 鼠标 指针 到 交换 图 像 按 钮 上 时 , 即 可 变换 按钮 图 片 ; 单 击 该 按钮 又 可 以 链接 到 指 
定 的 网 页 上 。 实 现 该 功能 的 具体 操作 步骤 如 下 。 
(1) 启动 Dreamweaver 8, 新 建 或 打开 事先 准备 好 的 文档 。 将 鼠标 指针 定位 到 文档 中 要 
插入 链接 图 片 的 位 置 。 
(2) 选择 [ 择 入】 【图 像 3 命 令 , 在 打开 的 [选择 图 像 源 文件 3 对 话 框 中 选择 要 插入 的 图 
片 ,完成 后 单 击 【确定 按钮 。 
(3) 选中 该 图 片 ,并 打开 【[ 属 性] 面板 ,在 [链接] 文本 框 中 输入 要 链接 的 URL 地 址 ,并 命 
名 图 像 , 即 设置 图 像 的 id 属性 值 ,如 图 14. 28 所 示 。 


a A A) NS re ee EAE 
nn 四 加 生 [575 Fj 门 忆 | 车 三 太夫 昌 -二 











图 14.28 设置 链接 地 址 
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(4) 选择 [窗口 了 代行 为 ] 命 令 ,打开 【行为 了 面板 ,并 单 击 其 中 的 加 号 按钮 ,在 打开 的 菜单 


中 选择 [交换 图 像 ] 命 令 , 如 图 14. 29 所 示 。 
(5) 打开 [交换 图 像 ] 对 话 框 ,如 图 14. 30 所 示 , 单 击 【浏览 ] 按 钮 ,在 【选择 图 像 源 文件 ] 对 


话 框 中 选择 要 奉 换 的 按钮 图 片 。 
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图 14.29 选择 [交换 图 像 ] 命 令 图 14.30 ”选择 要 替换 的 按钮 图 片 


(6) 完成 后 单 击 【确定 按钮 ,返回 到 [交换 图 像 ] 对 话 框 。 
在 [交换 图 像 ] 对 话 框 中 ,有 两 个 复 选 框 可 供 设置 。 
e 预先 载 和 人 图像: 选中 该 复 选 框 后 ,在 浏览 网 页 时 系统 同时 将 该 图 片 载 入 缓存 中 ， 
而 不 是 在 调用 JavaScript 时 才 下 载 ,以 防止 在 图 片 切换 时 延 时 。 
。 鼠标 滑 过 时 恢复 图 像 :选中 该 复 选 框 后 , 当 和 鼠标 指针 移出 图 片 时 ,将 恢复 原来 的 
按钮 图 片 。 
(7) 单 击 【 确 定 ] 按 钮 返回 [行为] 面板 。 此 时 便 可 看 到 所 加 入 的 【交换 图 像 ] 行 为 ,其 
默认 的 触发 事件 为 onMouseOver, 即 当 鼠 标 指针 移 过 图 片 时 触发 换 图 动作 ,如 
图 14. 31 所 示 。 
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图 14.31 增加 行为 后 的 [行为 面板 


在 【交换 图 像 】 对 话 框 中 ,如 果 选 中 了 【和 氛 标 滑 过 时 恢复 图 像 〗】 复 选 框 ,在 【行为 了 面板 中 
将 加 入 一 个 新 的 行为 一 一 【恢复 交换 图 像 3， 如 图 14. 31 所 示 。 其 黑 认 的 触发 事件 为 on- 
MouseOnut, 它 的 意思 是 当 鼠 标 指针 移 开 时 触发 动作 。 正 是 该 行为 使 按钮 在 鼠标 指针 移 开 
时 自动 恢复 原来 的 样子 。 


(8) 设置 完成 后 , 按 F12 键 打开 浏览 器 预览 。 此 时 如 果 按 上 述 方法 正确 设置 , 则 将 鼠标 
指针 移 到 按钮 上 时 , 即 可 改变 按钮 的 外 观 , 如 图 14. 32 所 示 。 








图 14. 32 按钮 换 图 效果 
在 使 用 交换 图 像 3 行 为 时 必须 注意 ,由 于 该 行为 所 改变 的 只 是 图 片 的 信息 源 属性 , 即 
SRC 属性 ,所 以 要 切换 的 图 片 必须 与 原 图 片 具 有 相同 的 尺寸 ,以 免 图 片 在 切换 时 变形 。 


在 这 里 ,同样 可 以 更 改 各 行为 的 触发 事件 。 如 果 在 更 改 时 发 现 没 有 更 多 的 事件 可 供 
选择 ,可 能 是 所 设置 的 浏览 器 版 本 太 低 。 可 在 【显示 事件 】 子 菜单 中 选择 更 高 版 本 的 济 
览 器 。 


14.5 在 状态 栏 中 显示 文本 信息 


浏览 网 页 时 , 当 鼠 标 指针 指向 链接 文字 或 图 片 时 ,浏览 器 底部 的 状态 栏 中 会 显示 一 些 信 
息 ,这 些 信息 大 多 是 所 链接 网 页 的 地 址 ,如 图 14. 33 所 示 。 
在 Dreamweaver 8 中 ,可 利用 【设置 状态 栏 文本 了 行为 在 状态 栏 中 显示 这 些 提 示 信 息 。 
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图 14.33 在 状态 栏 上 显示 文本 信息 


用 【设置 状态 栏 文本 了 行为 实现 状态 栏 提示 信息 的 具体 操作 步骤 如 下 。 
(1) 首先 ,将 鼠标 指针 定位 到 网 页 上 ,选择 [插入 】〗I【 图 像 对 象 ]I【 鼠 标 经 过 图 像 ] 命 令 ， 
在 网 页 中 插入 一 个 鼠标 经 过 的 动态 图 像 链 接 , 如 图 14. 34 所 示 。 


提示 





该 命令 和 上 节 介绍 的 【交换 图 像 〗 功 能 实质 是 一 样 的 ,插入 鼠标 经 过 图 像 后 ,在 【行为 了 
面板 中 可 以 看 见 上 节 介 绍 的 两 个 行为 ,如 图 14. 34 所 示 。 














ern oo 


图 14.34 插入 鼠标 经 过 图 像 





(2) 在 编辑 窗口 中 选中 该 图 片 选择 【窗口 3 代行 为 命令 ,打开 【行为 了 面板 。 


(3) 单 击 面板 中 的 加 号 按钮 ,在 打开 的 菜单 中 选择 【设置 文本 】 【设置 状态 栏 文本 命 
令 , 如 图 14. 35 所 示 。 





图 14.35 选择 [设置 状态 栏 文本 命令 


(4) 此 时 系统 将 弹出 【设置 状态 栏 文本 对 话 框 ,如 图 14. 36 所 示 , 在 [消息] 文本 框 中 输 
入 要 显示 的 信息 ,如 “超越 梦想 一 起 飞 ,你 我 共同 来 实现 ”等 文本 信息 。 

(5) 完成 后 单 击 【确定 按钮 ,在 [行为] 面板 中 可 以 看 到 新 加 入 的 [设置 状态 栏 文本 3 行 

为 ,该 行为 默认 的 触发 事件 为 onMouseOver, 即 当 鼠 标 指针 移 到 图 片上 时 即 可 触发 

行为 。 

保存 设置 后 , 按 F12 键 预 览 。 此 时 如 果 设置 正确 的 话 , 当 鼠标 指针 移动 到 图 片上 

时 ,浏览 器 的 状态 栏 中 即 可 显示 所 设置 的 文本 信息 。 


9 











图 14. 36 【设置 状态 栏 文本 ] 对 话 框 


细心 的 用 户 可 能 会 发 现 ,“ 超 越 梦想 一 起 飞 ,你 我 共同 来 实现 ”等 文本 信息 行为 还 存在 着 
一 些 缺陷 , 那 就 是 在 状态 栏 上 显示 的 文本 信息 不 能 自动 消失 ,即使 鼠标 指针 移 开 图 片 ,信息 
仍旧 显示 在 状态 栏 上 。 只 有 将 鼠标 指针 指向 其 他 链接 对 象 时 ,文本 信息 才 会 被 新 的 信息 替 
换 。 模 仿 上 节 介绍 的 方法 ,为 该 图 像 增 加 一 个 相反 事件 onMouseOut, 即 当 鼠 标 移 开 后 ,设置 
状态 栏 要 显示 的 信息 为 空 即 可 。 


14.6 制作 提示 对 话 框 


Dreamweaver 8 的 【弹出 信息 了 行为 可 以 用 来 显示 指定 的 信息 ,例如 当 网 站 中 某 个 网 页 正 
在 更 新 ,此 时 便 可 在 主页 中 ,连接 该 网 页 的 文字 、 图 片 或 在 导航 栏 按钮 上 加 入 该 行为 。 单 击 
该 链接 时 ,系统 将 弹出 一 个 对 话 框 提示 稍 后 再 访问 。 如 图 14. 37 所 示 , 由 于 没有 输入 任何 文 
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图 14.37 ”网 页 中 的 提示 对 话 框 
要 添加 [弹出 信息 了 行为 ,可 按 下 列 步骤 操作 。 


(1) 在 主页 中 选中 要 在 其 上 加 入 【弹出 信息 了 行为 的 文字 、 图 片 或 导航 栏 按钮 


(2) 选择 [窗口 〗I【 行 为 3 命令 ,打开 [行为 ] 面 板 。 


(3) 单 击 【 行 为 7 面板 中 的 加 号 按钮 ,在 打开 的 菜单 中 选择 【弹出 信息 命令 ,打开 [弹出 
信息 3 对 话 框 ,如 图 14. 38 所 示 。 
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图 14.38 设置 [弹出 信息 对 话 框 
(4) 在 [消息 ] 列 表 框 中 输入 要 显示 的 提示 信息 ,如 “请 确认 输入 姓名 和 职业 信息 ”。 


(5) 单 击 【 确 定 ] 按 钮 ,返回 [行为] 面板 。 此 时 可 看 到 面板 中 新 加 入 的 行为 ,其 默认 的 触 


发 事件 为 onClick, 即 单 击 该 对 象 后 的 触发 事件 。 如 果 想 使 用 其 他 触发 事件 的 动作 





可 单 击 【事件 ] 列 表 的 向 下 三 角 按 钮 ,在 弹出 的 菜单 中 选择 一 个 动作 ,例如 on- 
MouseOver。 
(6) 完成 设置 后 按 F12 键 预览 。 如 果 设置 正确 ,在 单 击 该 链接 对 象 时 , 便 可 弹出 含有 指 
定 信 息 的 对 话 框 。 
在 【弹出 信息 了 行为 所 显示 的 JavaScript 提示 对 话 框 中 只 有 一 个 [确定] 按钮 ,所 以 它 只 能 
作为 一 个 提示 对 话 框 来 使 用 ,而 不 能 进行 更 进一步 的 交互 操作 。 


14.7 显示 和 隐藏 层 


Dreamweaver 8 中 的 【显示 一 隐藏 层 了 行为 具有 显示 和 隐藏 层 的 功能 ,通过 事件 隐藏 或 显 
示 所 指定 的 层 , 一 般 常 被 用 作 与 网 页 交互 时 的 信息 。 例 如 , 当 鼠 标 指针 指向 某 个 图 片 和 文字 
时 , 即 可 显示 有 关 该 详细 信息 。 

利用 【显示 一 隐藏 层 了 行为 ,可 在 站 点 的 主页 上 ,为 每 个 导航 按钮 所 链接 的 网 页 设置 一 个 
包含 该 网 页 主要 信息 的 层 , 并 为 每 个 导航 按钮 加 入 行为 。 在 浏览 网 页 时 , 层 一 开始 处 于 隐藏 
状态 ,只 有 将 鼠标 指针 指向 该 导航 按钮 时 , 才 可 显示 该 层 ; 移 开 按钮 后 层 自动 消失 , 单 击 该 按 
钮 又 可 跳 转 到 目标 网 页 上 ,如 图 14. 39 所 示 。 
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利用 【显示 一 隐藏 层 ] 行 为 来 实现 显示 或 隐藏 层 的 操作 步 又 如 下 。 
(1) 首先 启动 Dreamweaver 8, 新 建 或 打开 事先 准备 好 的 网 页 ,插入 两 张 小 图 标 作为 导 


航 按钮 图 像 。 
(2) 打开 [插入 面板 中 的 [布局 〗 选 项 面板 , 单 击 其 中 的 [描绘 层 ] 按 钮 ,在 网 页 上 面 出 一 
个 局 。 


(3) 在 层 上 输入 目标 网 页 的 主要 内 容 , 并 将 该 层 拖 到 导航 栏 按钮 下 面 ,如 图 14. 40 所 示 。 
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图 14.40 制作 层 


(4) 选择 [窗口 ] 民 行为 命令, 打开 【行为 ] 面 板 。 

(5) 单 击 [ 行 为 面板 中 的 加 号 按钮 ,在 打开 的 菜单 中 选择 【显示 一 隐藏 层 命 令 , 打 开 
【显示 一 隐藏 层 ] 对 话 框 ,如 图 14. 41 所 示 。 

(6) 在 [命名 的 层 ] 列 表 框 中 选择 在 上 一 步 所 设置 的 层 ,并 单 击 【隐藏 按钮 , 则 该 层 被 标 
注 为 “隐藏 ”", 如 图 14. 41 所 示 。 





【命名 的 层 ] 列 表 框 中 将 显示 本 网 页 上 的 所 有 层 。 但 是 网 页 中 的 层 太 多 ,可 能 会 为 设 
置 带 来 不 便 。 此 时 可 以 在 【层面 板 中 将 无 关 的 层 隐 藏 起 来 。 在 层 名 称 左 侧 单 击 , 将 出 现 
一 个 眼睛 标记 。 在 眼睛 标记 上 单 击 ,使 眼睛 睁 开 , 表 示 显 示 层 ;使 眼睛 闭 上 ,表示 隐藏 层 。 











图 14.41 【显示 一 隐藏 层 ] 对 话 框 


(7) 单 击 [ 确 定 ] 按 钮 ,返回 [行为 ] 面 板 , 此 时 可 在 [行为 ] 面 板 中 看 到 新 加 入 的 【显示 一 
隐藏 层 ] 行 为 ,其 默认 的 动作 为 onLoad, 如 图 14. 42 所 示 , 表 示 网 页 载 和 时 先 隐藏 
层 , 如 图 14. 42 所 示 。 

(8) 选中 第 1 张 Office 图 标 图 像 , 单 击 【行为 面板 中 的 加 号 按钮 ,在 打开 的 菜单 中 选择 
【显示 一 隐藏 层 ] 命 令 . 打 开 【 显 示 一 隐藏 层 ] 对 话 框 ,如 图 14. 42 所 示 。 

(9) 在 【显示 一 隐藏 层 ] 对 话 框 中 选中 “ 层 "office"” 层 , 单 击 【 显 示 按 钮 ,显示 "office" 层 ， 
如 图 14. 42 所 示 ,最 后 在 【行为 3 面板 中 设置 onMouseOver 动作 。 
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图 14.42 设置 Office 图 像 的 显示 隐藏 层 动作 


(10) 再 定义 一 个 【显示 一 隐藏 层 ] 行 为 ,实现 当 鼠 标 在 office 图 标 图 像 上 时 隐藏 vista 
层 , 设 置 如 图 14. 43 所 示 。 











(11) 以 同样 的 方式 ,为 Windows 图 标 图 像 定义 两 个 行为 ,一 个 是 当 鼠 标 指针 移 到 该 图 
像 上 时 ,显示 vista 层 ; 另 一 个 是 当 和 鼠标 指针 移 到 该 图 像 上 时 ,隐藏 office 层 , 如 
图 14.43 所 示 。 
(12) 此 时 ,保存 并 按 F12 键 预览 网 页 , 则 效果 如 图 14. 44 所 示 。 : 
@ 








(344)e 














全 当 和 鼠标 指针 移 到 Vista 图 像 上 B 


图 14.44 显示 隐藏 层 行为 效果 





在 Dreamweaver 8 制作 的 网 页 中 ,几乎 所 有 的 对 象 都 可 以 设置 【显示 一 隐藏 层 ) 行 为 ， 
但 它们 可 使 用 的 触发 事件 并 不 完全 相同 。 


灵活 应 用 【显示 一 隐藏 层 ] 行 为 ,能 够 实现 许多 特殊 的 功能 。 例 如 ,在 浏览 器 中 加 载 网 页 


时 ,用 一 个 层 覆盖 网 页 ,并 在 层 上 写 上 ”* 网 页 在 加 载 中 


载 人 后 ,再 隐藏 该 层 显 示 。 
为 了 便于 参考 ,本 章 最 后 给 出 行为 的 触发 事件 的 动作 、 说 明 及 其 适用 的 浏览 器 版 本 列 


表 , 如 表 14. 2 所 示 。 


ee ”等 字样 ; 当 网 页 中 的 元 素 被 完全 


表 14.2 行为 动作 ,说 明 及 其 适用 的 浏览 器 




















动 作 NS3 | NS4 IE3 IE4 说 明 

onAbort Vv V V 中 断 对 象 载 人 时 
onAfterUpdate V 对 象 更 新 之 后 
onBeforeUpdate V 对 象 更 新 之 前 

onBlur V V ~ V 取消 选中 对 象 时 

onBounce V 选 框 中 的 内 容 到 达 选 框 边界 时 























































































































续 表 
动 作 NS3 NS4 IE3 IE4 说 明 

nine VYV | v | v | v | 更 改 页 面 上 的 值 时 

onClick V | v | v | v | 单 击 对 象 

onDblClick ~ NA 双击 对 象 

onError | ~ | 载 入 页 面 或 图 像 期 间 出 错 

GnBintil ~ | 选 框 成 分 的 内 容 完 成 一 个 循环 

6 V | v | v | v | 选中 指定 对 象 时 

onHelp ~ | 调用 帮助 时 

5 到 /| 按 下 键盘 任意 键 时 

De De ~ ~ | 按 下 并 释放 键盘 任意 键 时 

dnp ~ | 按 下 键盘 任意 键 后 释放 时 

nd VY | v | v | v | 图 像 或 页 面 载 人 完成 时 

onMouseDown VV | 按 下 鼠标 指针 键 时 

onMouseMove V | v | 鼠标 指针 在 指定 对 象 上 移动 时 

onMouseOut 省 涵 V | 鼠标 指针 离开 指定 对 象 时 

onMouseOver VY | V | v | v | 鼠标 指针 刚 开始 指向 指定 对 象 时 

nMpiisetip V VV | 释放 按 下 的 鼠标 指针 刍 

onMove J 移动 窗口 或 框架 时 

ee ~ | 指定 对 象 状态 改变 时 

加 V | v | 将 表单 重 设 为 默认 值 时 

~ | 重 调 浏览 器 窗口 或 框架 大 小 时 

onRowEnter V | 更 改 绑 定数 据 源 的 当前 记录 指针 时 

onRowExit /| 将 要 更 改 绑 定数 据 源 的 当前 记录 指针 时 

onScroll /| 上 下 拖 动 浏览 器 窗口 中 的 滚动 条 时 

onSelect VY | v | v | v | 选 定 文本 区 中 的 文本 时 

as V | 选 框 成 分 中 的 内 容 开始 一 个 循环 时 

onSubmit V | v | v | vv | 提交 表单 时 

cutisad V | v | v | v | 印 载 页 面 时 





注 :NS 表示 Netscape Navigator,IE 表示 Internet Explorer,/ 表示 选中 项 。 
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本 章 内 容 包括 : 
从 数据 库 网 页 基础 





全 表单 基本 操作 
全 配置 数据 库 
全 配置 服务 器 环境 
全 数据 连接 
本 章 要 点 : 
上 一 章 介 绍 了 动态 网 页 制作 , 它 是 页 面 中 显示 的 一 些 动态 效果 ,主要 利用 Dreanweaver 8 提 






下 






供 的 行为 来 实现 ,其 就 是 在 网 页 源 代码 中 增加 一 些 Javascnipt 脚本 来 实现 的 ， 

本 章 将 介绍 另 一 种 动态 网 页 的 制作 ,这 些 网 页 的 制作 通常 需要 服务 后 台数 据 库 的 支持 ， 
而 且 网 页 显示 内 容 由 远方 的 服务 器 来 控制 ,为 便于 区 分 ,我 们 将 其 称 为 数据 库 网 页 者 的 也 称 动态 
网 页 ,但 这 种 动态 网 页 与 上 章 动态 网 页 有 着 本 质 区 别 ) 目前, 数据库 网 页 已 成 为 网 页 制作 的 重要 
组 成 部 分 。 本 章 主要 介绍 如 何 利用 Deanyeaer 8 提供 的 各 种 工具 和 命令 来 开发 数据 库 网 页 











15.1 数据 库 网 页 概述 


随 着 Internet 的 迅猛 发 展 ,Internet 已 深入 人 们 生活 的 方方面面 ,借助 它 可 以 进行 网 上 
学 习 、 网 上 查阅 资料 .网 上 购物 、 网 上 聊天 、 网 上 游戏 和 网 上 资料 存储 等 。 用 户 的 各 种 信息 都 
不 用 强 记 , 它 们 都 存储 于 服务 器 端 ,无 论 什 么 时 候 上 网 ,在 何 处 上 网 ,都 可 从 服务 器 上 调 取 个 
人 信息 。 这 些 功 能 都 是 借助 于 服务 器 端 后 台 强 大 的 数据 库 来 实现 的 ,其 具体 的 操作 (如 信息 
入 库 .信息 查阅 等 ) 靠 的 就 是 数据 库 网 页 。 现 在 ,大 多 数 网 页 都 基于 这 种 数据 库 , 即 服务 器 端 
除了 Web 服务 器 外 ,还 有 一 个 重要 的 组 成 部 分 一 一 数据 库 服务 器 。 

以 前 要 开发 数据 库 网 页 ,与 数据 库 相 关 的 所 有 代码 全 靠 手 工 编写 。 现 在 有 了 Dream- 
weaver 8 ,数据 库 网 页 程序 的 开发 也 可 面向 对 象 进行 了 。Dreamweaver 8 是 一 个 专业 的 可 视 
化 Web 应 用 程序 开发 工具 。 它 提供 了 强大 的 数据 库 访问 功能 ,用 户 不 必 具 有 网 页 程序 设计 
的 基础 ,也 可 以 开发 非常 专业 的 数据 库 网 页 。 而 对 于 网 页 程序 设计 的 高 手 来 说 ,利用 Dream- 
weaver 8 也 可 以 大 大 提高 工作 效率 。 


15.2 表 单 


在 介绍 数据 库 网 页 制作 之 前 ,首先 了 解数 据 库 网 页 中 基本 元 素 一 一 表单 。 

网 页 是 一 种 平面 传播 工具 ,没有 表单 , 面 对 华丽 、 生 动 的 画面 ,浏览 者 只 能 照 单 全 收 而 不 
能 参与 其 中 。 网 页 表单 功能 实现 了 网 页 与 浏览 者 之 间 的 交互 ,是 网 站 与 浏览 者 沟通 的 桥梁 。 
平时 用 户 上 网 登录 E-mail 信箱 填写、 提交 各 种 个 人 资料 等 都 应 用 了 表单 的 各 种 功能 。 


15.2.1 表单 元 素 简介 
要 借助 Dreamweaver 8 开发 数据 库 网 页 ,首先 得 熟悉 其 提供 的 表单 对 象 。Dreamweaver 


8 的 [插入 3 面板 的 [表单 ] 子 面板 上 提供 了 完整 的 表单 对 象 。 选 择 【窗口 【插入 命令 ,打开 
【插入 了 面板 ,在 其 中 选择 [表单 3 选项 面板 ,如 图 15. 1 所 示 。 


表单 加 | 口 血 导 | 加 回 固 | 国 团 | 回国 口 | 葬 口 
1 | | ml 1 | 赂 本 和 于 | J i | | 1 1 
板 表 表 文 隐 文 复 | 跳 图 文 标 字 
单 单 亲 浴 亲 颖 芝 基 列 壬 轧 蔡 接 番 总 
选 字 域 区 和 框 按 按 / 菜 域 域 集 
项 段 域 钮 钮 菜 单 

面 组 单 


图 15.1 【表单 ] 选 项 面板 


要 向 网 页 中 添加 某 一 对 象 : 单 击 相应 的 按钮 即 可 (也 可 选择 【插入 代表 单 】 子 菜单 中 的 
表单 对 象 命令 来 添加 表单 元 素 ) 。 

下 面 详 细 介绍 各 种 常用 的 表单 元 素 属性 。 选 择 【 窗 口 ] 民 属性 】 命 令 打 开 【 属 性 】 面 板 。 
在 【属性 了 面板 中 ,可 设置 表单 元 素 的 各 种 属性 。 


1. 表单 


单 击 【表单 3 选项 面板 上 的 【表单 按钮 加 ,可 新 建 一 个 表单 ,或 者 选中 编辑 画面 上 的 已 建 
表单 对 象 ,都 可 出 现 该 表单 的 [属性 ] 面 板 , 如 图 15. 2 所 示 。 在 表单 【属性 了 面板 中 ,可 设置 以 
下 选项 。 








表单 名 称 动作 [ 局 目标 [ 闭关 @ | 无 司 局 
EE | 方法 Posr 国 吧 | 国 























图 15.2 表单 [属性 面板 


e@ 表单 名 称 :在 该 文本 框 中 设置 表单 名 称 。 在 脚本 语言 中 (如 JavaScript 或 VBScript) 
使 用 表单 名 称 可 以 控制 表单 实现 各 种 功能 。 

e 动作 :在 该 文本 框 中 设置 服务 器 端的 表单 处 理 程 序 及 其 路 径 。 如 果 该 表单 由 In- 
dex. asp 处 理 , 则 输入 Index. asp 的 路 径 ;或 者 单 击 【 浏 览 文件 了 按钮 回 将 快速 准确 地 
定位 文件 。 

e 方法 :在 此 下 拉 列 表 框 中 选择 表单 内 容 的 提交 方式 。 包 括 3 种 方式 :默认 .GET 和 
POST。 它 们 的 区 别 在 于 ,GET 方法 主要 是 把 提交 的 数据 附加 到 URL 后 面 ,例如 ， 
http://www. baidu. com/s ? wd== %CA%C0%BD%E7%B1%AD&cl==3, 该 方法 
可 以 立即 传送 信息 ,效能 高 ,但 是 提交 的 数据 有 限 ( 约 2KB 左右 ), 且 数据 是 公开 的 ; 
而 POST 由 于 要 等 待 服务 器 端 读 取 数据 ,性 能 上 稍 慢 一 些 , 但 传送 的 数据 量 没有 限 
制 且 相 对 保密 。 一 般 , 大 部 分 的 表单 几乎 都 使 用 POST 方式 。 该 下 拉 列 表 中 还 有 一 
个 【默认 】 选 项 , 它 表 示 使 用 默认 方式 提交 表单 内 容 ,一 般 是 GET 方式 。 


2. 文本 框 


单 击 【表单 选项 面板 上 的 【文本 字段 ] 按 钮 器, 可 插入 文本 框 。 文 本 框 用 于 接收 所 输入 
的 文本 、 字 母 或 数字 。 输 入 的 文本 可 以 有 一 行 或 多 行 ,也 可 以 是 项 目 符号 或 星 号 (口令 保护 ) 
的 形式 显示 。 文 本 框 [属性 面板 各 选项 的 含义 如 下 。 
e 文本 域 :设置 文本 框 名 称 , 用 于 区 分 不 同 的 文本 框 。 
e 字符 宽度 :设置 文本 框 中 能 显示 的 最 多 字符 数 , 即 文本 框 的 尺寸 大 小 ,该 值 小 于 【最 
多 字符 数 ] 文 本 框 中 设置 的 值 。 
e 初始 值 :设置 文本 框 的 初始 文本 内 容 。 
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e 类 型 :选择 文本 框 类 型 .共有 3 种 类 型 。 
。 单行 :单行 文本 框 。 其 [属性] 面板 如 图 15. 3 所 示 。 
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15.3 单行 文本 框 [属性 ] 面 板 


9 多 行 :多 行文 本 框 。 其 【属性 面板 如 图 15. 4 所 示 。 








文 丰 域 
J extfield 





























图 15.4 多 行文 本 框 [属性 面板 


* 密码 :口令 文本 框 ,在 口令 文本 框 中 输入 文本 时 ,会 以 星 号 代替 显示 。 其 【属性 】 
面板 如 图 15. 5 所 示 。 











文本 城 字符 宽度 
J ext fiald 日 多 宇 符 数 
EE 


























图 15.5 口令 [属性 ] 面 板 


在 多 行文 本 框 和 口令 文本 框 属性 中 ,可 设置 以 下 选项 。 

行 数 :在 该 文本 框 中 设置 文本 框 能 显示 文本 的 最 多 行 数 , 即 文本 框 的 高 度 。 

换行 :在 该 下 拉 列 表 框 中 选择 文本 框 内 容 自 动 换行 的 情况 。 

默认 :默认 值 。 一 般 情 况 下 , 当 内 容 超 出 [字符 宽度 了 的 值 就 换行 。 

关 : 不 换行 显示 ,内 容 宽度 超出 【字符 宽度 了 的 值 时 出 现 左 右 滚动 条 。 

虚拟 :换行 显示 ,内 容 宽度 超出 [字符 宽度 了 的 值 时 就 换行 显示 , 当 超出 【 行 数 的 值 时 
出 现 上 下 滚动 条 。 当 提交 数据 进行 处 理 时 ,自动 换行 并 不 应 用 于 数据 ,数据 作为 一 
个 数据 字符 串 进行 提交 。 

实体 :与 [虚拟 了 类 似 。 当 提交 数据 进行 处 理 时 ,也 对 这 些 数据 设置 自动 换行 。 

最 多 字符 数 :在 该 文本 框 中 指定 文本 框 所 能 接受 的 最 多 字符 数 。 


3. 按钮 
单 击 【表单 〗 选 项 面板 上 的 【按钮 按钮 口 ,可 插入 按钮 。 按 钮 用 于 执行 标准 任务 ,如 提 
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交 、 重 新 设置 表单 内 容 或 完成 自 定义 的 功能 ,其 属性 了 面板 如 图 15. 6 所 示 。 
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15.6 按钮 [属性 ] 面 板 
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按钮 名 称 : 在 该 文本 框 中 设置 按钮 名 称 。 它 有 两 个 保留 名 Submit 和 Reset。 

值 :在 该 文本 框 中 为 按钮 设置 适当 提示 语 , 如 “提交 ”“ 重 置 " 和 *“ 耕 ”等 。 

动作 :该 选项 组 指定 在 选中 某 个 单 选 按 钮 时 发 生 的 事件 。 

选中 [提交 表单 单 选 按钮 ,【 值 3 文本 框 会 自动 设 为 提交 ”, 当然 也 可 以 修改 ,提交 表 

单 用 于 将 表单 信息 提交 到 处 理 信息 的 应 用 程序 或 脚本 。 

e 选中 [ 重 设 表单 - 单 选 按钮 【 值 ] 文 本 框 会 自动 设 为 “ 重 设 ”, 当 然 也 可 以 修改 , 重 设 表 
单 用 于 以 默认 值 重 新 设置 所 有 的 表单 项 。 

e 选中 【无 3 单 选 按钮 ,表示 既 不 做 提交 动作 也 不 会 做 重 置 动作 。 


4. 复 选 框 


单 击 【表单 3 选项 面板 上 的 【 复 选 框 ] 按 钮 回 ,可 插入 复 选 框 。 复 选 框 对 象 用 于 确认 一 组 
选项 中 的 多 个 选 定 响应 , 它 能 实现 在 一 组 选项 中 选 定 多 个 选项 ,其 【属性 了 面板 如 图 15.7 
所 示 。 

。 复 选 框 名 称 :在 该 文本 框 中 设置 复 选 框 的 名 称 。 

®” 选 定 值 :在 该 文本 框 中 设置 选 定 的 复 选 框 的 值 。 当 提交 其 所 在 的 表单 时 ,该 值 将 发 

送 到 服务 器 端的 应 用 程序 中 。 . 

e@ 初始 状态 :该 选项 组 用 于 指定 该 复 选 框 在 表单 第 一 次 载 和 人 时 是 否 被 选 定 。 








过 定 值 Eheckbox 初始 状 者 〇 已 各 过 关 j 无 网 站 . 











图 15.7 复 选 框 [属性 ] 面 板 


5. 单 选 按 钮 : 
单 击 【表单 】 选 项 面板 上 的 【 单 选 按钮 按钮 图 ,可 搬入 单 选 按钮 。 单 选 按钮 用 于 确认 一 


组 选项 中 的 某 一 个 选 定 响 应 。 单 击 该 按钮 后 ,只 能 在 一 组 选项 中 选 定 一 个 选项 。 其 【属性 了 
面板 如 图 15. 8 所 示 。 
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回 单 过 按钮 达 定 值 Fediotsttm | 初始 状态 〇 已 名 渤 类 忆 [无 四 
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图 15.8 单 选 按钮 【属性 】 面 板 


e” 单 选 按钮 :在 该 文本 框 中 设置 单 选 按钮 名 称 。 同 一 组 中 的 单 选 按钮 必须 使 用 同一 名 
称 值 。 

ee 选 定 值 :在 该 文本 框 中 设置 选 定 的 单 选 按钮 的 值 。 当 提交 单 选 按钮 所 在 的 表单 时 ， 
该 值 将 会 被 送 到 服务 器 端的 应 用 程序 中 。 同 一 组 中 的 每 个 单 选 按钮 要 有 不 同 的 对 
应 值 。 

ee 初始 状态 :该 选项 组 用 于 指定 这 个 单 选 按钮 在 表单 第 一 次 载 人 时 是 否 被 选 定 。 在 一 
组 单 选 按钮 中 只 能 将 一 个 单 选 按钮 设置 为 被 选 定 状态 。 


6. 列表 /菜单 


单 击 【 表 单 〗 选 项 面板 上 的 【列表 /菜单 3 按钮 国 ,可 插入 菜单 列表 框 对 象 , 它 用 于 列 出 一 
系列 可 以 选择 的 值 。 该 对 象 可 以 设 成 一 个 下 拉 菜 单 , 也 可 以 设 成 一 个 列表 框 ,其 [属性 ] 面 板 
如 图 15.9 所 示 。 
































图 15.9 下 拉 菜 单 【属性 面板 


列表 /菜单 :在 该 文本 框 中 设置 下 拉 列 表 框 的 名 称 。 
类 型 :该 选项 组 用 于 设置 对 象 的 类 型 是 下 拉 列 表 框 还 是 列表 框 。 对 于 列表 框 , 可 以 
设置 列表 框 的 高 度 ( 即 列表 框 中 可 以 一 次 显示 的 项 目 数 ) 以 及 是 否 允 许 一 次 选 定 多 
个 项 目 。 

e 【列表 值 3 按 钮 :用 于 打开 [列表 值 3 对 话 框 , 如 图 15. 10 所 示 。 




















图 15.10 【列表 值 ] 对 话 框 


可 在 该 对 话 框 中 添加 下 拉 菜 单 或 列表 框 中 的 项 目 。 列 表 为 每 个 项 目 设置 标签 (显示 在 
列表 中 的 文本 ) 和 值 ( 选 定 这 个 项 目 时 ,向 处 理 程序 发 送 的 值 )。 如 果 没 有 指定 值 ,标签 值 会 
被 发 送 到 处 理 程序 中 。 

使 用 对 话 框 顶部 的 加 号 按钮 因 和 减 号 按钮 回 可 以 添加 和 删除 列表 中 的 项 目 ,使 用 项 部 
的 向 上 三 角 按 钮 加 和 向 下 三 角 按 钮 回 可 调整 列表 中 项 目的 排列 顺序 。 


7. 隐藏 域 


单 击 【表单 选项 面板 上 的 【隐藏 域 ] 按 钮 加 ,可 插入 隐藏 域 , 它 用 于 存储 并 传递 不 需要 浏 
览 者 填写 但 在 处 理 表单 信息 的 应 用 程序 中 需要 使 用 的 信息 ,其 [属性 了 面板 如 图 15. 11 所 示 。 








Re@ 


隐 亲 区 域 
N Ridaenpield] 值 [ 








图 15.11 隐藏 式 表单 【属性 】 面 板 
。 隐藏 区 域 :在 该 文本 框 中 设置 隐藏 域 的 名 称 。 
e 值 :在 该 文本 框 中 设置 隐藏 式 表 单 的 值 。 
至 此 ,已 详细 介绍 了 常用 表单 元 素 , 下 面 将 实际 制作 一 个 表单 。 


15.2.2 制作 表单 网 页 
为 了 熟练 操作 Dreamweaver 8 表单 对 象 ,下 面 介绍 一 个 实用 表单 网 页 的 设计 过 程 ,有 关 表 


单 后 台 功 能 本 例 暂 不 深入 介绍 , 当 学 习 服务 器 数据 库 的 定义 与 连接 之 后 ,再 介绍 表单 是 如 何 传递 
数据 的 。 制 作 的 表单 网 页 效果 如 图 15. 12 所 示 。 该 表单 提供 了 用 户 注册 信息 输入 和 提交 操作 。 











图 15.12 注册 表单 实用 设计 效果 
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该 表单 制作 过 程 如 下 。 
(1) 启动 Dreamweaver 8, 新 建 一 个 网 页 文档 。 在 【表单 ] 工 具 选 项 面板 中 单 击 【 字 有 段 集 】 


(2 


(3 


(4 


(5 


) 


) 


按钮 口 , 在 弹出 的 [字段 集 ] 对 话 框 中 输入 “会 员 注册 ”文字 , 单 击 【 确 定 ] 按 钮 实现 在 
编辑 窗口 中 插入 一 个 字段 集 ,如 图 15. 13 所 示 。 字 段 集 相当 于 一 个 框架 框 , 可 以 在 
其 中 放置 各 种 对 象 ,便于 对 同一 类 型 的 对 象 进行 统一 管理 ,除了 装饰 和 归 置 之 外 ， 
其 本 身 没有 任何 表单 交互 和 数据 传递 功能 。 


Dos ij 台 回 占 | 加 包 |n |aG) 








图 15.13 插入 字段 集 


由 于 在 【属性 了 面板 中 没有 字段 集 的 属性 设置 ,如果 要 设置 其 属性 ,需要 在 源 代 码 中 
通过 CSS 直接 进行 设置 。 方 法 是 单 击 [代码 了 视图 按钮 ,切换 到 【代码 了 视图 ,找到 下 
面 代码 行 。 

< fieldset> < legend> 会 员 注册 < /legend> < /fieldset> 

然后 手工 输入 下 面 属 性 ,设置 字段 集 的 宽 , 以 及 标题 头 的 样式 ,其 中 运用 了 CSS 滤 
镜 特效 。 


< fieldset style= "width:620px;"|> < legend |style= "font- size:20px; 





























width:120px; text- align:center; font- family: 隶 书 ; border:solid lpx# O0000C; 














filter: DropShadow (Color= # dddddd, Offx= 2，OffY=- 2, Positive= 120) 
> 会 员 注 册 < /legend> 

< /fieldset> 
把 光标 置 于 字段 集 内 ,在 【表单 〗 选 项 面板 中 单 击 【 表 单 ] 按 钮 旦 ,新 建 一 个 表单 。 其 
属性 设置 保持 默认 值 。 
把 光标 置 于 表单 对 象 内 ,插入 一 个 18 行 4 列 的 表格 ,设置 宽度 为 550 像素 .居中 显 
示 , 具 体 设 置 如 图 15. 14(a) 所 示 。 
设置 第 1 列 和 第 3 列 单元 格 的 宽度 为 像素 ,并 把 其 中 的 部 分 单元 格 进行 合并 ,如 图 
15. 14(b) 所 示 。 














(a) 插 入 表格 (b) 设 置 和 合并 单元 格 
15.14 插入 并 设置 表格 

(6) 定义 表格 之 后 ,就 可 以 在 表格 中 插入 表单 对 象 了 。 在 第 1 行 中 搬入 一 个 文本 框 和 一 
个 按钮 ,要 浏览 者 输入 账号 和 单 击 【核对 按钮 ,其 属性 设置 如 图 15. 15 所 示 。【 核 
对 了 按钮 的 [属性 了 面板 中 的 【动作 了 设置 为 “无 ”, 该 按钮 的 具体 功能 主要 通过 Javas- 
cript 来 实现 ,本 例 就 不 再 介绍 。 

(7) 设置 第 1 个 单元 格 的 背景 色 为 浅 灰 色 几 0F0F0 ,下面 每 隔 一 行 就 设置 第 1 个 单元 格 
为 浅 灰 色 , 用 户 可 自 定义 ,就 不 再 重复 。 














图 15.15 设置 第 1 行文 本 框 


(8) 本 表 中 基本 上 都 是 文本 框 对 象 .有 关 文 本 域 具体 属性 设置 如 表 15. 1 所 示 。 
表 15.1 设置 本 表 中 文本 域 属性 




















功 能 文本 域名 称 最 多 字符 数 类 型 
真实 姓名 name 20 单行 
密码 password 20 密码 
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续 表 
功 能 文本 域名 称 最 多 字符 数 类 型 
确认 密码 passwordconfirm 20 密码 
E-mail email 40 单行 
常用 电话 phone 25 单行 
邮政 编码 postcode 6 单行 
收 货 地 址 address 100( 同 时 设置 “字符 宽度 ”为 53) 单行 
出 生年 月 birthday 10( 同 时 设置 “字符 宽度 ”为 10) 单行 
身份 证 号 idcard 18 单行 
家 庭 电话 hphone 20 单行 
手机 mobilephone 30 单行 
传呼 bpcall 20 单行 
职务 duty 20 单行 
单位 名 称 unit 60 单行 
单位 电话 ophone 20 单行 
OICQ oicq 10 单行 
单位 地 址 oaddress 100( 同 时 设置 “字符 宽度 ”为 53) 单行 
推荐 人 ID commend 100( 同 时 设置 “字符 宽度 ”为 53) 单行 
(9) 本 表 中 插入 3 个 按钮 ,具体 属性 设置 如 表 15. 2 所 示 。 
表 15.2 设置 本 表 中 按钮 属性 
功 能 按钮 名 称 值 动 作 
核对 submit 核对 无 
提交 Submit 提交 提交 表单 
重新 输入 Submitla 重 填 重 设 表单 














(10) 把 光标 置 于 “性 别 ” 单 元 格 ,在 【表单 选项 面板 中 单 击 【 单 选 按钮 】, 插 入 两 个 单 选 
按钮 ,要 注意 设置 两 个 单 选 按钮 的 名 称 相通 ,具体 属性 设置 如 图 15. 16 所 示 。 















































图 15.16 性别 单 选 按钮 组 的 属性 设置 


(11) 把 光标 置 于 “民族 ?单元 格 ,在 该 单元 格 中 搬入 一 个 下 拉 列 表 框 ,其 属性 设置 如 
图 15. 17 所 示 。 
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图 15.17 设置 民族 下 拉 列 表 框 


(12) 单 击 “ 列 表 / 菜 单 收 属性 3 面板 中 的 [列表 值 3 按 钮 ,打开 [列表 值 ] 对 话 框 ,在 该 对 话 


框 中 增加 列表 值 ,如 图 15. 18 所 示 。 





























15. 18 【列表 值 ] 对 话 框 
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(13) 模仿 上 面 操作 步骤 ,再 插入 "学 历 5 和 ”职业 ”下拉 列表 框 。 现 在 ,一 个 表单 设计 制 


作 的 例子 就 基本 完成 了 ,效果 如 图 15. 12 所 示 。 但 本 实例 仅 就 外 观 设计 进行 介绍 ， 
具体 功能 实现 , 即 后 台 与 服务 器 的 数据 联系 ,在 后 面 章节 中 我 们 再 进行 介绍 。 


15.3 配置 数据 库 


为 了 实现 服务 器 端 与 客户 端 (浏览 器 端 ) 信 息 交 流 , 保 存 客户 端 提交 的 信息 ,为 用 户 提供 
数据 查询 ,就 需要 借助 数据 库 技术 支持 。 本 节 以 Access 数据 库 技术 为 例 , 介 绍 如 何 设计 后 台 


数据 库 。 


15. 3.1 设计 Access 数据 库 结 构 


本 节 将 以 一 个 简单 的 博客 网 站 数据 库 创 建 为 例 , 介 绍 Access 数据 库 结 构 设 计 。 有 关 
Access 软件 的 详细 操作 请 参考 相关 专门 书籍 。 

该 数据 库 blog 共 包 括 4 张 表 ,具体 说 明 如 下 。 

@ Class: 该 表 保 存 博客 站 点 内 日 志 类 别 信息 。 

e Comm: 该 表 保 存 用 户 对 日 志 的 评价 信息 。 

e ”Content: 该 表 保存 日 志 的 详细 信息 。 

e@ User: 该 表 保 存 注 册 用 户 信 息 。 

关于 这 4 张 表 的 结构 如 表 15. 3 一 15. 6 所 示 。 


表 15.3 Class 表 基本 结构 









































字段 名 数据 类 型 字段 大 小 说 了 明 
Class_Id 自动 编号 自动 编号 
Class_Name 文本 20 分 类 名 称 
Class_Order 数字 长 整 型 分 类 排序 
表 15.4 Comm 表 基 本 结构 
字段 名 数据 类 型 字段 大 小 说 明 
Comm_Id 自动 编号 去 自动 编号 
Blog_Id 数字 长 整 型 日 志 编 号 
Comm_Content 备注 es 评价 内 容 
Comm_Author 文本 50 评价 人 
评价 时 间 ( 在 属性 设置 区 域 的 [默认 值 】 
Comm_Time 日 期 /时 间 长 日 期 文本 框 中 输入 “一 Now()”, 实 现 自动 输 
入 日 期 ) 














表 15.5 Content 表 基本 结构 























字段 名 数据 类 型 字段 大 小 说 明 

Blog_Id 自动 编号 自动 编号 

Blog_ClassId 数字 长 整 型 日 志 所 属 分 类 编号 

Blog_Title 文本 200 日 志 标 题 

Blog_Content 备注 过 日 志 内 容 
发 布 日 志 的 时 间 ( 在 属性 设置 区 域 的 

Blog_PostDate 日 期 /时 间 到 【默认 值 ] 文 本 框 中 输入 “= 二 Now()”, 实 
现 自动 输入 日 期 ) 

Blog_Author 文本 50 日 志 发 布 者 


表 15.6 User 表 基 本 结构 























字段 名 数据 类 型 字段 大 小 说 明 
User_Id 自动 编号 a 自动 编号 
User_Name 文本 20 姓名 
User_Password 文本 25 密码 
Blog_Content 备注 = 日 志 内 容 
User_Time 日 期 /时 间 pat 注册 时 间 


下 面 介绍 Access 数据 表 的 制作 过 程 ,具体 操作 步骤 如 下 。 

(1) 选择 [开始 】 代 所 有 程序 】| Microsoft Access 命令 ,启动 Microsoft Access 2002 ,建立 
一 个 数据 库 并 为 其 命名 ,如 图 15. 19 所 示 。 本 例 保存 为 blog. mdb。 

在 [对 象 列 表 栏 中 选择 [【 表 】 选 项 ,然后 在 右 侧 的 命令 中 双击 【使 用 设计 器 创建 表 】 
选项 ,打开 如 图 15. 20 的 表 设 计 窗 口 .根据 上 面 所 规划 的 表 结 构 进行 表 设计 。 表 的 
结构 可 以 参照 上 面 列表 所 示 。 
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图 15. 19 【blog: 数 据 库 ] 窗 口 图 15.20 表 设 计 窗口 
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(3) 在 如 图 15. 20 的 表 设 计 窗口 中 , 先 根据 规划 的 表 结 构 , 在 【字段 名 称 ] 列 中 输入 字段 
名 ,然后 在 [数据 类 型 ] 列 中 选择 字段 的 数据 类 型 ,常用 的 字段 类 型 包括 数字 (存储 
数值 ) .文本 (存储 字符 串 ) 日 期 /时 间 ( 存 储 时 间 格 式 数 值 )、 自 动 编号 (存储 系统 自 
动 输入 的 整数 ) .备注 ( 存 储 大 容量 的 数据 ) 等 。 

(4) 当 表 格 的 字段 非常 多 时 ,应 该 在 【说明 ] 列 中 输入 字段 的 作用 提示 ,以 便 查看 。 

(5) 最 后 在 表 设 计 窗 口 下 面 字 段 属 性 设置 区 域 设置 该 字段 的 详细 属性 ,注意 不 同类 型 
的 字段 所 显示 的 属性 设置 也 不 同 , 如 图 15. 21 所 示 。 
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(a) 文 本 类 型 (b) 数 字 类 型 (c) 日 期 /时 间 类 型 
图 15.21 设计 字段 类 型 


(6) 设计 完毕 表 结构 ,在 工具 栏 中 选择 【数据 表 视 图 选项 命令 ,如 图 15.22(a) 所 示 , 然 
后 切换 到 数据 表 视 图 ,输入 记录 ,如 图 15. 22(b) 所 示 。 





(b) 在 数据 表 视 图 中 输入 数据 记录 


图 15.22 输入 数据 
(7) 设计 完毕 数据 表 结 构 之 后 ,我 们 可 以 输入 数据 ,也 可 以 运行 时 在 浏览 器 中 输入 。 关 
闭 表 设 计 窗 口 ,这 时 系统 会 提示 保存 该 表 提 示 对 话 框 ,输入 相应 数据 表 名 称 ,这 样 
就 完成 了 一 张 表 的 设计 。 经 过 设计 的 4 张 表 如 图 15. 23 所 示 。 
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图 15.23 设计 的 数据 表 


15.3.2 配置 ODBC 数据 源 


要 实现 服务 器 与 客户 端 之 间 数 据 的 正常 交流 ,需要 在 服务 器 数据 库 与 服务 器 端 应 用 程 
序 之 间 建 立 数据 库 连 接 , 即 建立 一 个 数据 交流 通道 。 建 立 这 种 通道 的 技术 有 多 种 ,下 面 重点 
介绍 常用 的 ODBC 技术 。 

ODBC(Open DataBase Connectivity, 开 放 式 数据 库 连 接 ) 是 Microsoft 公司 开发 的 开放 
数据 库 系 统 应 用 程序 接口 规范 。ODBC 为 应 用 程序 提供 了 一 套 调用 接口 规范 和 基于 动态 连 
接 库 的 运行 支持 环境 ,使 应 用 程序 能 方便 地 访问 不 同 的 、 相 对 于 应 用 程序 独立 的 数据 库 系 
统 。 要 配置 ODBC 建立 数据 库 连接 的 具体 操作 步骤 如 下 (此 处 以 配置 访问 Microsoft 的 
Access 数据 库 为 例 ) 。 

(1) 打开 【控制 面板 3 窗口 ,双击 【管理 工具 图 标 ,在 打开 的 【管理 工具 窗口 中 双击 【 数 

据 源 (CODBC) 了 图 标 , 如 图 15. 24 所 示 。 
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图 15.24 打开 [数据 源 (ODBC)】 


山 91 外 


制 
作 
数 
据 
库 
网 
页 














(2) 打开 【ODBC 数据 源 管理 器 〗 对 话 框 ,如 图 15. 25(a) 所 示 。 
(3) 选择 【系统 DSN] 标 签 ,切换 到 【系统 DSN] 选 项 卡 ,然后 单 击 [添加 按钮 增加 一 个 系 
统 DSN ,如 图 15. 25(b) 所 示 。 


ETODBC 数据 源 管理 如 
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图 15.25 增加 系统 DSN 
(4) 打开 [创建 新 数据 源 ] 对 话 框 。 在 【创建 新 数据 源 ] 对 话 框 中 ,选择 所 选用 的 相应 数 
据 库 驱动 程序 (在 此 选用 的 是 Access 数据 库 , 因 此 选择 Microsoft Access Driver 
(x .mdb) 选 项 ) ,如 图 15. 26(a) 所 示 。 
(5) 单 击 【 完 成 3 按钮 ,打开 如 图 15.26(b) 所 示 的 [ODBC Microsoft Access 安装 】 对 
话 框 。 


寺 拓 修 想 为 下 安装 小 咒 汪 的 驱动 程 友信 )。 














(a) 选 择 Access 数据 库 (b) 创 建新 数据 源 


图 15.26 选择 数据 源 
(6) 在 该 对 话 框 中 的 【数据 源 名 ] 文 本 框 中 设置 所 创建 的 数据 源 名 称 ,本 例 中 命名 为 
blog; 在 【说明 ] 文 本 框 中 设置 相关 描述 信息 ,以 明确 所 用 数据 库 , 也 可 以 省 略 ; 然 后 
单 击 【 选 择 按 钮 ,找到 数据 库 所 在 位 置 ,选择 相应 数据 库 , 单 击 【 确 定 ] 按 钮 ,关闭 
【ODBC Microsoft Access 安装 3 对 话 框 ,如 图 15. 27 所 示 。 
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图 15. 27 【ODBC Microsoft Access 安装 ] 对 话 框 


(7) 单 击 [ODBC 数据 源 管理 器 3 对话 框 中 的 【确定 了 按钮 ,关闭 KODBC 数据 源 管理 器 】 对 
话 框 ,这 样 就 完成 了 ODBC 数据 源 的 配置 工作 。 
至 此 ,与 数据 库 连接 的 接口 就 配置 好 了 ,下 面 的 工作 就 是 在 Dreamweaver 8 中 进行 数据 
库 访 问 。 


15.4 配置 服务 器 环境 


要 实现 动态 数据 库 功能 ,需要 配置 服务 器 环境 ,主要 包括 安装 服务 器 运行 支持 组 件 或 软 
件 和 定义 动态 网 站 站 点 。 下 面 逐一 介绍 。 


15. 4.1 安装 服务 器 支持 组 件 IIS 


运行 服务 器 就 需要 一 个 支持 平台 。Windows XP 提供 了 一 个 IIS(Internet 信息 服务 ) 组 
件 ,安装 该 组 件 的 步骤 如 下 。 
(1) 打开 【控制 面板 3 和 窗口 ,双击 【增加 或 删除 程序 图标 ,打开 【增加 或 删除 程序 ] 窗 口 ， 
在 左 侧 的 选项 栏 中 双击 【添加 /删除 Windows 组 件 了 图 标 ,如 图 15. 28 所 示 。 
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图 15.28 增加 IIS 组 件 步骤 1 





(2) 打开 [Windows 组 件 向 导 】 对 话 框 ,在 该 对 话 框 中 选中 【Internet 信息 服务 (IIS)] 选 
项 ,如 图 15. 29 所 示 。 在 该 对 话 框 中 单 击 [ 详 细 信息 了 按钮 ,可 以 查看 需要 安装 的 子 
组 件 ,以 选择 所 需 安装 的 组 件 , 这 里 保持 默认 选项 。 
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图 15.29 【Windows 组 件 向 导 ] 对 话 框 

(3) 单 击 [下 一 步 ] 按 钮 ,系统 开始 安装 该 组 件 , 这 个 过 程 中 还 需要 Windows XP 系统 
盘 。 安 装 完成 后 ,选择 [开始 了 人民 控 制 面板 命令 ,在 打开 的 【控制 面板 窗口 中 双击 


【管理 工具 了 图 标 ,打开 【管理 工具 ] 面 板 。 
(4) 然后 双击 【Internet 服务 管理 器 图标, 启动 [Internet 信息 服务 了 窗口 ,如 图 15. 30 所 


示 。 在 【Internet 信息 服务 了 窗口 中 可 以 建立 和 管理 IIS。 
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图 15. 30 【Internet 信息 服务 了 窗口 


15. 4.2 ”创建 动态 站 点 
由 于 数据 库 访问 是 服务 器 端 行为 ,在 使 用 之 前 应 定义 动态 站 点 并 指定 服务 器 技术 。 详 
细 介 绍 如 下 。 
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1. 定义 站 点 


只 有 定义 好 了 一 个 站 点 ,Dreamweaver 8 才 知 道 站 点 文件 及 各 种 文档 存放 的 位 置 。 站 点 
定义 包括 定义 本 地 站 点 和 定义 远程 站 点 。 
本 地 站 点 的 定义 就 是 在 本 地 磁盘 上 指定 用 于 存放 站 点 文件 的 文件 夹 。 如 果 不 定义 好 本 
地 站 点 ,Dreamweaver 8 就 不 能 正常 运行 。 定 义 本 地 站 点 的 具体 步骤 如 下 。 
(1) 启动 Dreamweaver 8, 选 择 [ 站 点 3I【 管 理 站 点 命令 。 
(2) 在 弹 开 的 [管理 站 点 】 对 话 框 中 , 单 击 【 新 建 ] 按 钮 ,新 建站 点 , 弹 开 【 未 命名 站 点 1 的 
站 点 定义 为 了 对 话 框 , 单 击 【高 级 选项 卡 ,在 【分 类 列表 框 中 选择 [本 地 信息 选项， 
如 图 15. 31 所 示 。 
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(3) 在 【站 点 名 称 】 文 本 框 中 指定 站 点 名 。 定 义 好 的 站 点 名 会 显示 在 【站 点 管理 ] 窗 口 和 
【文件 面板 的 下 拉 列 表 中 。 
(4) 在 【本 地 根 文件 夹 ] 文 本 框 中 指定 一 个 存放 应 用 文件 的 本 地 磁盘 文件 夹 。 可 直接 在 
【本 地 根 文件 夹 ] 文 本 框 中 输入 ,或 者 通过 单 击 该 文本 框 右 侧 的 文件 夹 按钮 瑟 进 入 
对 话 框 进行 选择 。 
(5) 其 余 的 选项 对 于 定义 本 地 站 点 并 不 必需 ,可 根据 需要 填写 。 
(6) 单 击 【确定 3 按钮 。 
TE 
RT Ss 
回 自动 简 采 本 培 文 件 列表 双 ) 
i 
人 : 
区 分 大 小 写 的 畔 接口 ] 伊 用 区 分 大 个 写 的 加 扒 检 查 on . 
" 
图 15.31 设置 【本 地 信息 ] 选 项 
2. 指定 服务 器 技术 和 
在 开始 构建 网 页 应 用 之 前 ,必须 指定 所 采用 的 服务 器 技术 ,以 便 Dreamweaver 8 在 页 面 





中 插入 相应 的 服务 器 端 脚本 。 如 果 是 ColdFusion 服务 器 ,Dreamweaver 8 就 会 在 页 面 中 插 
入 必要 的 ColdFusion 标记 和 脚本 ;如 果 是 遵循 Sun 的 JavaServer Pages 规范 的 网 页 服务 器 ， 





ze 





Dreamweaver 8 就 会 插入 Java 代码 ;如 果 是 遵循 Microsoft 的 Active Server Pages 规范 的 服 
务 器 ,Dreamweaver 8 就 会 插入 VBScript 或 JavaScript。 

服务 器 技术 的 指定 是 对 某 一 站 点 统一 进行 的 ,而 不 是 针对 某 单个 页 面 进行 的 ,这 就 保证 
了 应 用 程序 中 所 有 的 页 面 都 能 协调 一 致 。 

指定 服务 器 技术 的 操作 步骤 如 下 。 

(1) 选择 [站 点 区 管理 站 点 】 命 令 。 

(2) 在 打开 的 【管理 站 点 对话 框 中 选择 所 定义 的 站 点 ,然后 单 击 【 编 辑 了 按钮 ,如 

图 15. 32 所 示 。 


























图 15.32 【管理 站 点 ] 对 话 框 


(3) 在 [信息 数据 库 站 点 的 站 点 定义 为 对 话 框 的 [分 类 列表 框 中 , 单 击 [远程 信息 3 选 
项 ,设置 如 图 15. 33 所 示 。 在 【访问 】 下 拉 列 表 框 中 选择 * 本 地 /网 络 ”, 该 选项 适合 在 
本 地 计算 机 上 建立 虚拟 服务 器 环境 使 用 或 局 域 网 内 使 用 。 然 后 在 下 面 远 端 文件 夹 
中 指定 本 地 计算 机 上 IIS 默认 路 径 。 

(4) 在 [信息 数据 库 站 点 的 站 点 定义 为 〗 对 话 框 的 [分 类 列表 框 中 , 单 击 【测试 服务 器 】 了 
选项 ,设置 如 图 15. 34 所 示 。 
在 【服务 器 模型 3 下 拉 列 表 框 中 选择 服务 器 模型 :ASP JavaScript、ASP VBScript、 
ASP NET CASP NET VB、ColdFusion、JSP 或 PHP MySQL 等 。 

(5) 如 果 选 择 的 是 ASP, 其 Scripting 可 设置 默认 脚本 语言 VBScript 或 者 JavaScript; 如 
果 选 择 的 是 JSP 或 者 ColdFusion ,此 项 设置 将 由 Dreamweaver 8 自动 设 好 。 








默认 的 .asp、.jsp 或 者 .cfm 后 缓 将 不 会 影响 静态 网 页 ;但 是 , 若 将 默认 后 缓 设 为 
. htm 或 者 . html, 将 会 使 动态 网 页 无 法 正常 运行 ,需要 手工 将 动态 页 面 后 缓 更改 为 相应 的 
.asp、.jsp 或 者 .cfm。 


(6) 其 余 选项 是 对 活动 数据 窗口 进行 配置 .可 根据 实际 情况 进行 选择 配置 。 
(7) 单 击 [确定 了 按钮 即 可 。 


























图 15.33 设置 远程 信息 图 15.34 设置 测试 服务 器 信息 
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15.5 建立 数据 连接 


页 要 与 后 台数 据 库 连 接 或 进行 数据 库 访问 ,全 靠 手 工 编写 代码 。 使 用 Dream- 


weaver 8, 网 页 与 数据 库 之 间 的 沟通 就 变 得 非常 简单 ,只 需 简单 设置 各 种 参数 即 可 ,用 户 不 必 
掌握 复杂 的 脚本 编写 基础 就 可 以 开发 网 络 数据 库 程序 。 

建立 数据 库 连 接 就 是 设置 好 一 组 连接 数据 库 的 参数 。 没 有 设置 好 这 组 参数 ,应 用 程序 
与 数据 库 之 间 就 没有 通路 ,无 法 交换 数据 。 所 建 数据 库 连 接 的 类 型 由 网 页 服务 器 所 支持 的 
服务 器 技术 而 定 。 如 果 服 务 器 支持 ASP 技术 , 则 建立 ADO 数据 连接 ;如 果 服 务 器 支持 JSP 


技术 , 则 建立 


JDBC 数据 连接 ;如 果 是 ColdFusion 服务 器 , 则 建立 ColdFusion 数据 连接 。 


本 节 以 建立 ADO 数据 连接 为 例 进 行 说 明 。 
建立 ADO 连接 时 又 分 两 种 情况 : 
@ 网 页 服务 器 和 Dreamweaver 8 运行 在 同一 个 Windows 系统 下 ,如 均 为 Windows 


XP, 则 只 需 一 个 数据 源 名 CDSN) 就 可 建立 数据 连接 。 数 据 源 名 相当 于 数据 库 的 
简称 。 

e Dreamweaver 8 与 网 页 服务 器 若 不 是 运行 在 同一 操作 系统 下 ,就 得 借助 一 个 自 定义 
连接 字符 串 与 数据 库 进行 连接 。 

在 此 ,以 第 一 种 情况 为 例 说 明 如 何 建立 连接 。 


(1) 在 Dreamweaver 8 编辑 窗口 中 选择 【窗口 区 数 据 库 命令 ,打开 【数据 库 】 面 板 , 如 
图 15. 35 所 示 。 


(2) 单 放 





[数据库 3 面板 项 部 的 国 按 钮 ,弹出 一 个 下 拉 菜 单 ,如 图 15. 36 所 示 。 
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交 新 编 网 页 制作 入 门 与 提高 
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若 要 在 该 页 面 上 使 用 动态 数据 : 
1， 请 为 该 文件 创建 一 个 站 点 


2 渤 拓 一 种 立 接 类 型。 


3.、 设 秆 站 点 的 测试 服务 器 。 





图 15.35 【数据 库 ] 面 板 图 15.36 面板 下 拉 莱 单 


(3) 选择 下 拉 菜 单 中 的 【数据 源 名 称 (DSN) 选项 ,会 自动 打开 如 图 15. 37 所 示 的 [ 数 
据 源 名 称 (DSN) 对 话 框 。 
(4) 在 【数据 源 名 称 (DSN) 对话 框 的 [连接 名 称 】 文 本 框 中 命名 数据 连接 名 ,如 conn。 





命名 时 最 好 在 连接 名 前 加 “conn” 前 缓 以 与 别 的 对 象 名 区 分 开 来 。 


(5) 在 【数据 源 名 称 (DSN) 3 下 拉 列 表 框 中 选择 前 面 定义 的 数据 源 。 

(6) 在 【Dreamweaver 应 连接 】 选 项 组 中 选中 【使 用 本 地 DSN 了 单 选 按钮 。 

(7) 单 击 【 确 定 】 按 钮 ,关闭 [数据 源 名 称 (DSN) 对 话 框 , 所 定义 的 新 的 数据 连接 会 出 
现在 [数据 库 ] 面 板 中 。 单 击 connTaiyi 左 侧 的 固 按钮 ,可 以 展开 此 数据 连接 ,如 
图 15. 38 所 示 。 
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图 15.37 【数据 源 名 称 (DSN) ] 对 话 框 图 15.38 新 建立 的 数据 连接 











Ja 夺 呈 忆 
6 [= 本 章 内 容 包 括 : 
全 了 解 博客 
全 设计 动态 网 站 基本 思路 
全 博客 日 志 动 态 列 表 
全 发 表 博 客 
全 博客 详细 页 制作 


本 章 要 点 : 
上 一 章 介 绍 了 数据 库 网 页 制作 基础 ,本 章 将 在 这 个 基础 上 深入 介绍 如 何 利 用 Dreanweaver 
8 提供 的 可 视 化 操作 工具 开发 一 个 动态 博客 网 站 
博客 是 最 近 一 两 年 在 中 国 大 陆 才 开 始 火 爆 的 时 尚 网 络 生活 , 开 博 客 , 侃 博客 成 为 互联 网 上 
一 道 绚丽 的 风景 线 ,因此 学 习 网 页 制作 的 广大 读者 也 不 能 熟 视 旁 观 、 错 失 良 机 。 本 章 将 通过 一 
I 综合 实例 引导 读者 逐步 融入 博客 新 浪潮 .在 学 习 和 追逐 时 尚 中 找到 一 个 平衡 点 。 














16.1 博客 概述 


博客 (Blog 或 Weblog ,网 络 日 志 ) 是 一 种 傻瓜 式 的 个 人 信息 发 布 系统 。 像 免费 电子 邮件 
的 注册 、 写 作 和 发 送 一 样 ,学 习 和 使 用 博客 非常 简单 。 如 果 把 论坛 (BBS) 比喻 为 开放 的 广场 ， 
那么 博客 就 是 开放 的 私人 房间 。 可 以 充分 利用 超 文本 链接 、 网 络 互动 .动态 更 新 的 特点 , 精 
选 并 链接 全 球 互联 网 中 最 有 价值 的 信息 、 知 识 与 资源 ;也 可 以 将 个 人 工作 过 程 、 生 活 故事 、 思 
想 历程 .闪现 的 灵感 等 及 时 记录 和 发 布 .发挥 个 人 无 限 的 表达 力 ; 还 可 以 以 文 会 友 , 结 识 和 汇 
聚 朋 友 ,进行 深度 交流 沟通 。 

目前 ,国内 互联 网 上 诞生 了 很 多 大 型 专业 的 博客 网 站 ,专门 为 广大 网 民 免 费 提供 博客 空 
间 , 申 请 自己 的 博客 账号 ,如 图 16. 1 所 示 。 各 大 门户 网 站 也 纷纷 开辟 自己 的 博客 服务 ,招揽 
网 客 ,如 图 16. 2 所 示 。 











(a) 博 客 网 (b) 博 客 中 国 
图 16.1 专业 博客 网 站 
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(a) 新 浪 博 客 (b) 搜 狐 博 客 


图 16.2 门户 博客 网 站 


16.2 博客 网 站 设计 思路 


忽 如 一 夜 春风 来 , 千 树 万 树 梨 花 开 ,博客 迅速 在 全 国 铺 开 实在 是 互联 网 上 的 一 大 奇观 。 在 
学 习 网 页 制作 中 如 果 自 己 动手 建 一 个 博客 网 站 ,不 管 做 工 如 何 简陋 ,也 不 管 结果 是 否 扳 芳 自 赏 ， 
但 对 于 学 习 本 身 来 说 都 会 产生 很 大 的 推动 作用 。 本 例 要 完成 的 博客 网 站 效果 如 图 16. 3 所 示 。 
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(c) 全 文 阅读 (d) 写 日 志 


ae 


图 16.3 博客 网 站 效果 浏览 


本 博客 网 站 具有 日 志 列 表 、 阅 读 详细 内 容 、 读 者 评论 ,评论 显示 、 写 日 志 、 分 类 ,信息 统计 
和 登录 注册 等 功能 。 网 站 设计 思路 如 下 。 : 
@ 本 例 博客 网 站 从 大 的 方面 来 看 主要 包括 三 个 大 的 功能 页 :主页 列表 日 志 @ 


(index. asp) .详细 页 阅读 日 志 (read. asp) 和 编辑 页 发 布 日 志 (edit. asp) 。 

@ 为 实现 上 面 三 大 功能 ,又 把 网 页 中 各 个 相对 独立 的 功能 区 域 独立 为 一 个 网 页 文件 ， 
这 样 就 可 以 在 多 个 文件 共用 ,如 同 Flash 动画 中 的 元 件 ,这 种 设计 方便 后 期 编辑 修 
改 , 同 时 也 缩小 了 网 站 文件 大 小 。 例 如 ,网 站 每 页 都 有 一 个 标题 栏目 ,那么 我 们 就 把 








这 个 标题 栏目 做 成 独立 的 文件 ,然后 在 其 他 页 面 中 用 一 句 代 码 引 用 该 文件 即 可 。 
e 在 每 个 功能 模块 网 页 中 定义 并 绑 定 记录 集 , 最 后 根据 需要 随意 组 合 即 可 。 


诗 


注意 
本 章 实例 是 以 Windows XP 操作 系统 为 基础 ,以 Access 2002 数据 库 软 件 作为 数据 管 


理工 具 。 如 果 用 户 的 系统 和 数据 库 管 理 软件 不 同 , 如 Windows 2000 或 Access 2000, 可 能 
有 些 操作 存在 差异 。 


实现 本 博客 网 站 主要 步骤 如 下 。 

(1) 首先 ,应 在 本 地 计算 机 上 安装 IIS 服务 器 组 件 ,详细 操作 参见 第 15. 4. 1 小 节 内 容 。 

(2) 在 本 地 计算 机 上 定义 ODBC 数据 库 连 接 , 详 细 操作 参见 第 15. 3. 2 小 节 内 容 。 

(3) 在 本 地 计算 机 非 系 统 盘 根 目录 下 建立 一 个 文件 夹 .命名 为 mysite, 例 如 :D:\mys- 
ite, 作 为 本 地 文件 夹 ; 在 本 地 计算 机 的 系统 盘 目 录 下 找到 IIS 服务 器 组 件 所 在 路 径 
(Inetpub) ,然后 在 wwwroot 子 文件 夹 中 定义 一 个 与 本 地 文件 夹 同 名 的 文件 夹 , 例 
如 ;C;\Inetpub\wwwroot\mysite, 作 为 远程 文件 夹 。 

(4) 启动 Dreamweaver 8 定义 一 个 动态 站 点 ,详细 操作 参见 第 15. 4. 2 小 节 内 容 。 

(5) 创建 博客 网 站 数据 库 ,详细 操作 参见 第 15. 3. 1 小 节 内 容 。 

(6) 在 Dreamweaver 8 定义 的 动态 站 点 中 建立 数据 库 连 接 , 详 细 操 作 参 见 第 15.5 小 节 内 容 。 

(7) 然后 接着 下 面 各 节 介 绍 步骤 完成 具体 网 页 制作 工作 。 


16.3 制作 首页 


首页 功能 用 于 显示 日 志 分 类 列表 。 该 页 由 6 个 文件 组 装 在 一 起 ,包括 标题 页 (top. asp)、 
版 权 页 (foot. asp) .登录 页 (login. asp)、 分 类 列表 页 (class. asp) 、 网 站 信息 统计 页 (info. asp) 
和 日 志 列 表 页 (book. asp) 。 整 个 index. asp 首页 编辑 状态 如 图 16. 4 所 示 。 








图 16.4 首页 编辑 效果 


(372) 


如 果 切 换 到 【代码 了 视图 ,我 们 会 发 现 整 个 页 面 非 常 简洁 ,使 用 了 去 ! 一 一 # include 
file="login. asp" 一 一 盖 语句 来 导入 外 部 文件 。 代 码 如 下 : 
< table width= "762" border= "0" alignr "center" cellpadding= "0" cellspacing= "0"> < tr> 
< td heagers= "247> |< ! - - # include file= "top asp"- - > |< /td> < /tr> 














< tr> < td> < table width= "100% " border= "0" cellspacing= "0" cellpadding= " 
0 E> 
< td width= "142" valign= top> < table width= "100% "border= "0" cellspacing= " 
0" cellpadding= "0" align= center> < tr> 









































< td> |<!--# include file= "login asp"- - > |< /td> < /tr> 
< tr> < td> gnbsp;< /td> < /tr> 
< tr> < td> |< ! - - # include file= "class. asp"- - > |< /td> < /tr> 
< tr> < td> |< ! - -# include file= "info asp"- - > |< /td> < /tr> 
< /table> < /td> 
< tdvalige "topr> < div align= "center |< ! - - # include file= "book asp"- - > 











< /div> < /td> < /tr> < /table> 
< /td> < /tr> < tr> 


< td> |< ! - -# include file= "footasp"- - > |< /td> 
< /tr> < /table> 














16.3.1 注册 和 登录 


实现 注册 和 登录 功能 的 操作 步骤 如 下 。 

(1) 打开 login. asp, 新 建 一 个 3 行 2 列 的 表格 ,制作 一 个 表单 域 ,如 图 16. 5 所 示 。 

(2) 定义 记录 集 。 选 择 [ 人 窗口 ] 民 绑 定 了 命令, 打开 【 绑 定 了 面板 , 单 击 面板 顶部 的 办 按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 【记录 集 ( 查 询 )] 选 项 ,打开 【记录 集 ] 对 话 框 ,定义 一 个 记 
录 集 ,设置 如 图 16. 6 所 示 。 






































EL | 
图 16.5 制作 一 个 表单 域 图 16.6 设置 [记录 集 ] 对 话 框 
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记录 集 也 是 一 张 数 据 表 ,不 过 它 是 虚拟 的 临时 表 , 仅 存在 服务 器 的 计算 机 内 存 内 , 随 
时 可 以 关闭 。 记 录 集 是 根据 用 户 的 要 求 在 数据 库 中 查询 符合 要 求 的 记录 集合 ,定义 记录 
集 是 任何 动态 网 站 操作 的 第 一 步 , 其 他 操作 都 是 在 此 基础 上 进一步 加 工 。 


(3) 在 【记录 集 ] 对 话 框 中 ,【 名 称 ] 文 本 框 是 为 记录 集 定义 一 个 名 字 , 便 于 在 其 他 脚本 中 
引用 【连接 J 下 拉 文 本 框 用 来 指定 记录 集 要 查询 数据 库 ,在 本 例 指定 为 数据 库 连 
接 , 即 DSN;【 表 下 拉 列 表 框 用 来 选择 要 查询 的 数据 表 ;【 列 选项 主要 指定 记录 和 集 
中 将 包含 查询 数据 表 中 哪些 字段 江 筛 选 ] 选 项 区 设置 查询 的 筛选 条 件 江 排序 ] 选 项 
设置 查询 的 记录 集 根据 哪 一 个 字段 以 什么 方式 排序 。 
定义 服务 器 行为 一 一 登录 用 户 。 选 择 [ 窗 口 3I【 服 务 器 行为 命令 ,打开 [服务 器 行 
为 ] 面 板 , 单 击 面板 顶部 的 国 按钮 ,在 弹出 的 下 拉 菜 单 中 选择 [用 户 身 份 验证 〗I【 登 
录用 户 命 令 , 如 图 16.7 所 示 , 打 开 【 登 录用 户 ] 对 话 框 。 

(5) 在 【登录 用 户 】 对 话 框 中 定义 一 个 验证 用 户 登 录 身 份 的 服务 器 行为 ,设置 如 图 16. 8 

所 示 。 
服务 器 行为 实质 就 是 一 段 脚 本 程序 。 
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图 16.8 设置 [登录 用 户 ] 对 话 框 


(6) 打开 registry. asp 文件 ,定义 用 户 注册 服务 器 行为 。 方 法 是 在 【服务 器 行为 面板 的 
下 拉 菜 单 中 选择 [插入 记录 命令 ,把 用 户 的 注册 信息 保存 到 后 台数 据 库 中 ,设置 如 
图 16. 9 所 示 。 但 在 定义 服务 器 行为 之 前 要 先 定义 一 个 记录 集 , 设 置 与 login. asp 文 
件 中 的 记录 集 设置 相同 。 




















图 16.9 定义 插入 记录 服务 器 行为 


16. 3.2 站 点 信息 统计 


实现 站 点 信息 统计 的 操作 步骤 如 下 。 

(1) 打开 info. asp, 定 义 记录 集 。 在 打开 的 【记录 集 】 对 话 框 中 , 单 击 【高 级 按钮 ,切换 到 
高 级 状态 ,设置 的 记录 集 参 数 如 图 16. 10 所 示 。 其 中 用 到 一 个 函数 COUNT, 该 函 
数 可 以 统计 符合 条 件 的 记录 集中 记录 的 个 数 。 
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图 16.10 定义 高 级 记录 集 


(2) 以 同样 的 方式 再 定义 两 个 记录 集 , 用 来 统计 Comm 表 和 User 表 的 记录 数 , 如 
图 16. 11 所 示 。 
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(a) 统 计 评论 记录 数 (b) 统 计 注册 用 户 数 


图 16.11 定义 高 级 记录 集 


(3) 把 光标 置 于 要 显示 记录 集 的 地 方 , 在 【记录 集 ] 面 板 中 选中 要 插入 的 选项 , 单 击 面板 
底部 的 【插入 按钮, 即 可 实现 插入 记录 集 , 详 细 操作 如 图 16. 12 所 示 。 
四 日 全 mW 旧 














图 16.12 插入 记录 集 


16. 3.3 日 志 分 类 列表 
实现 日 志 分 类 列表 的 操作 步骤 如 下 。 


(1) 打开 class. asp, 定 义 记录 集 。 在 打开 的 [记录 和 集 】 对 话 框 中 ,定义 一 个 记录 集 用 来 查 
询 数 据 库 class 表 中 数据 ,设置 的 记录 集 如 图 16. 13 所 示 。 
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图 16.13 定义 记录 集 
(2) 把 分 类 名 称 (Class_name) 绑 定 到 编辑 窗口 的 表 中 ,选中 该 绑 定数 据 , 在 【属性 】 面 板 
中 定义 一 个 动态 数据 链接 。 方 法 是 单 击 【属性 面板 中 【链接 文本 框 右 侧 的 按钮 ， 
在 打开 的 【选择 文件 对 话 框 中 选择 要 链接 的 文件 ,如 图 16. 14 所 示 。 





oD wn 


图 16. 14 ”定义 动态 数据 链接 。 
(3) 在 【选择 文件 ] 对 话 框 中 单 击 【 参 数 ] 按 钮 ,打开 [参数] 对话 框 ,定义 一 个 变量 并 指定 - 
变量 要 传递 的 动态 数据 .详细 步骤 如 图 16. 15 所 示 。 








图 16.15 设置 链接 要 传递 的 动态 参数 


(4) 选中 插入 分 类 名 称 的 行 ,然后 在 【服务 器 行为 】 面 板 的 下 拉 菜 单 中 选择 【重复 区 域 】 
命令 ,实现 显示 所 有 数据 ,如 图 16. 16 所 示 。 











图 16.16 设置 重复 显示 区 域 


16.3.4 日 志 显 示 列 表 


实现 日 志 显 示 列 表 的 操作 步骤 如 下 。 
(1) 打开 books. asp, 定 义 记录 集 。 在 打开 的 【记录 集 ] 对 话 框 中 ,定义 一 个 记录 集 用 来 
查询 数据 库 Content 表 中 的 分 类 日 志 据 ,设置 的 记录 集 如 图 16. 17 所 示 。 























图 16.17 定义 多 表 查 询 


(2) 在 上 面 记录 集中 用 了 到 跨 表 查 询 技术 ,具体 代码 如 下 ,用 INNER JOIN 连接 两 个 数 
据 表 , 用 ON 语句 指明 连接 两 个 表 相 同 的 字段 。 
SELECT * 
FROM Content INNER JOIN class 
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ON Content Blog ClassID= class class ID "+ Recordsetl book MAColParamt " 
ORDER BY Blog PostDate DESC 


(3) 同时 再 定义 两 个 记录 集 , 分 别 用 来 查询 日 志 的 评论 数 和 所 属 分 类 ,具体 设置 如 


图 16. 18 和 图 16. 19 所 示 。 
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图 16.18 定义 classname 记录 集 图 16. 19 定义 Recordsetl_book 记录 集 

(4) 把 记录 集 绑 定 到 网 页 编辑 窗口 ,然后 选中 整个 动态 数据 绑 定 表格 ,定义 重复 区 域 服 
务 器 行为 。 

(5) 定义 分 页 导航 栏 。 把 光标 置 于 底部 单元 格 中 ,选择 【[ 插 人] 民 应 用 程序 对 象 ] 区 记录 
集 分 页 了 民 记 录 集 导航 条 了 命令 ,如 图 16. 20 所 示 。 

(6) 在 打开 的 【记录 集 导 航 条 】 对 话 框 中 设置 要 导航 的 记录 集 , 具 体 设置 如 图 16. 21 
所 示 。 

















图 16. 21 【记录 集 导航 条 ] 对 话 框 
(7) 设置 “评论 "和 “点 击 阅 读 全 文 ”动态 数据 链接 ,如 图 16. 22 所 示 。 





新 编 网 页 制作 入 门 与 提高 








图 16. 22 定义 动态 数据 链接 


(8) 切换 到 【代码 了 视图 ,输入 下 面 代码 用 来 判断 用 户 所 选 类 别 是 否 有 日 志 记录 ,如 果 没 
有 显示 下 面 提示 信息 ,有 则 显示 记录 。 


汪汪 

if (Recordsetl book EOF) then 

> 

< br> < br> 

< Palign= center> 

当前 < span style = " font - weight: bold; color: # FF0000" > <% = 
(classname. Fields. Item("class Name"). Value)s > < /span> 类 没有 任何 日 志 ! < /p> 

< 名 // 下 面 两 行 代码 是 从 底部 移 到 顶部 ,以 便于 管理 

classname. Close () 

Set classname = Nothing 

名 > 

< 和 

else 

> 


(9) 然后 在 底部 输入 条 件 结束 语句 : 


<% EndIf%®%> 


16. 3.5 组 装 首页 文件 


组 装 各 个 功能 模块 文件 主要 借用 “二 ! 一 一 # include file==" 文 件 名 " 一 一 二 ”关键 句 来 
完成 ,但 由 于 各 个 文件 都 定义 了 记录 集 和 调用 了 服务 器 行为 ,所 以 当 把 这 些 文件 同时 调 到 一 
个 文件 内 时 可 能 会 存在 很 多 冲突 ,解决 的 方法 如 下 。 

(1) 打开 index. asp 文件 ,切换 到 【代码 了 视图 ,在 代码 顶部 输入 下 面 两 行 代码 : 


< $$ @ LANGUAGE= "VBSCRIPT"® > 
< !——# include file= "Connections/conn asp" - - > 


(2) 第 1 行 代码 指定 脚本 语言 类 型 ,第 2 行 指定 数据 库 连 接 代码 。 

(3) 然后 打开 各 个 功能 模块 文件 ,把 各 个 文件 的 前 两 行 如 上 显示 代码 删除 (这 些 代 码 是 
在 定义 记录 集 时 ,系统 自动 增加 的 ) ,避免 代码 重复 冲突 。 

(4) 查看 每 个 文件 中 定义 的 记录 和 集 名称 是 否 相 同 ,如 果 相 同 ,需要 用 【查找 和 替换 菜单 


命令 修改 其 中 的 一 个 记录 集 命名 。 
以 同样 的 方法 ,选择 [编辑 ]I【 查 找 和 替换 命令 ,修改 重复 区 域 服 务 器 行为 代码 中 
定义 的 变量 ,避免 重复 。 例 如 ,book. asp 文件 中 的 变量 : 


Repeatl_ numRows 
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Repeatl_ index 

替换 为 : 

Repeatl_book numRows 
Repeat]l_book_ _index 
class. asp 文件 中 的 变量 : 
Repeatl_class_numRows 
Repeatl_class__index 
替换 为 : 
Repeatl_class_numRows 
Repeatl_class_index 
最 后 , 按 F12 键 在 浏览 器 中 预览 ,浏览 是 否 还 存在 错误 ,如 果 还 存在 错误 再 根据 提 
示 进 行 修改 。 
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16.4 制作 详细 页 


详细 页 功能 用 于 显示 日 志 详细 内 容 和 对 该 日 志 的 评价 ,以 及 发 布 评价 。 该 页 由 6 个 文件 
组 装 在 一 起 ,包括 标题 页 (top. asp) ,版 权 页 (foot. asp)、 分 类 列表 页 (class. asp)、 网 站 信息 统 
计 页 (info. asp) .日 志 详 细 页 (show. asp) 和 日 志 评 价 页 (comm. asp)。 整 个 show. asp 详细 页 
编辑 状态 如 图 16. 23 所 示 。 
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图 16.23 详细 页 编辑 效果 
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下 面 重点 介绍 日 志 详细 页 (show. asp) 和 日 志 评 价 页 (comm. asp) 制 作 。 


16.4.1 显示 日 志 详 细 内 容 


实现 日 志 详 细 内 容 的 操作 步骤 如 下 。 

(1) 打开 show. asp 文件 ,定义 记录 集 。 在 打开 的 【记录 集 】 对 话 框 中 , 单 击 【高 级 按钮 ， 
切换 到 高 级 状态 ,设置 的 记录 集 参 数 如 图 16.24 所 示 。 其 中 用 到 Re- 
quest. QueryString("blog") 语 句 获取 主页 跳 转 过 来 时 在 URI 中 传递 的 参数 ,该 参 
数 存储 着 日 志 的 编号 ,运行 时 代码 如 下 : 
http://localhost/mysite/read asp? |blog= 48| 
在 查询 语句 中 用 到 多 表 查 询 , 以 获取 该 编号 的 日 志 所 属 的 分 类 。 

把 定义 的 记录 集 绑 定 到 编辑 窗口 的 表格 中 ,然后 再 定义 一 个 记录 集 用 来 统计 该 日 
志 的 评论 记录 数 民 记录 集 】 对 话 框 设置 如 图 16. 25 所 示 。 

(3) 把 该 记录 集中 的 记录 绑 定编 辑 窗 口中 ,如 图 16. 26 所 示 。 
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图 16.26 绑 定 记录 集 


16.4.2 日 志 评 价 和 显示 


实现 日 志 评价 和 显示 的 操作 步骤 如 下 。 

(1) 打开 comm. asp 文件 ,定义 记录 集 。 在 打开 的 【记录 集 】〗 对 话 框 中 , 单 击 【高 级 】 
按钮 ,切换 到 高 级 状态 ,设置 的 记录 集 参 数 如 图 16.27 所 示 。 其 中 用 到 
Request. QueryString("blog" ) 语 句 获取 主页 跳 转 过 来 时 在 URI 中 传递 的 参数 。 

(2) 把 定义 的 记录 集 绑 定 到 编辑 窗口 的 表格 中 ,如 图 16. 28 所 示 。 
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图 16.27 定义 记录 集 图 16.28 绑 定 记录 集 


(3) 在 【服务 器 行为 3 面板 中 单 击 因 按钮 ,在 打开 的 下 拉 菜 单 中 选择 【插入 记录 选项 命 
令 , 设 置 [插入 记录 了 对话 框 , 如 图 16. 29 所 示 。 通 过 增加 该 服务 器 行为 可 以 实现 对 
日 志 发 表 个 人 评价 。 
































到 : [cooe_Aather ~ 


提交 为 | 文本 总 





图 16. 29 【插入 记录 ] 对 话 框 


16.5 制作 编辑 页 


详细 页 功能 用 于 显示 日 志 详 细 内 容 和 对 该 日 志 的 评价 ,以 及 发 布 评价 。 该 页 由 5 个 文件 
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”组 装 在 一 起 ,包括 标题 页 (top. asp) 版权 页 (foot. asp)、 分 类 列表 页 (class. asp) 、 网 站 信息 统 
计 页 (info. asp) 和 发 布 页 (write. asp) 。 整 个 edit. asp 编辑 页 编辑 状态 如 图 16. 30 所 示 。 












图 16.30 编辑 页 编辑 效果 


下 面 重点 介绍 发 布 页 (write. asp) 的 制作 过 程 ,具体 操作 步骤 如 下 。 

(1) 打开 write. asp 文件 ,定义 记录 集 。 在 打开 的 【记录 集 ] 对 话 框 中 ,设置 的 记录 集 参 
数 如 图 16. 31 所 示 。 

(2) 把 该 记录 集 绑 定 到 下 拉 菜单 表单 对 象 上 ,具体 操作 步骤 如 图 16. 32 所 示 。 通 过 定义 
下 拉 菜 单 表单 的 动态 属性 ,可 以 实现 下 拉 菜 单 显 示 的 列表 选项 会 根据 数据 库 中 的 
数据 而 动态 显示 。 
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本 图 16.32 定义 表单 动态 属性 





(3) 在 【服务 器 行为 面板 中 单 击 固 按钮 ,在 打开 的 下 拉 菜 单 中 选择 【插入 记录 选项 命 
令 , 设 置 [ 插 入 记录 】 对 话 框 ,如 图 16. 33 所 示 。 通 过 增加 该 服务 器 行为 可 以 实现 发 
布 日 志 。 
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图 16.33 插入 记录 


(4) 为 了 防止 没有 登录 的 浏览 者 也 发 布 日 志 , 可 以 切换 到 【代码 3 视图 ,在 代码 项 部 输入 
下 面 代码 对 用 户 身份 进行 验证 ,然后 在 代码 末尾 输入 二 %End if 中 之 。 该 条 件 语句 
的 作用 是 如 果 已 经 登录 则 可 允许 发 布 日 志 , 和 否则 提示 用 户 进 行 登录 。 其 中 Session 
("MM_Username") 变 量 是 用 户 在 登录 时 ,系统 存储 用 户 身份 的 变量 。 
< 

if Session ("MM Username")= "" then 

和 

< br /> 

< div align= center> 

你 没有 登录 ,请 先 < a href= "index asp"> 登录 < /a> 再 发 表 日 志 ! 

< /div> 

< 

Else 要 
和 > 
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全 网 页 色彩 应 用 


本 章 要 点 : 

网 页 给 人 的 第 一 印象 来 自 于 视觉 ,在 网 页 设计 中 ,合适 的 色彩 能 给 网 页 作品 带 来 鲜 活 的 
生命 力 。 它 既是 界面 设计 的 语言 ,又 是 视觉 信息 传达 的 手段 和 方式 ,是 网 页 界面 设计 中 不 可 
或 缺 的 重要 元 素 。 色 彩 的 选择 和 搭配 相当 重要 ,不 同 的 色彩 搭配 产生 不 同 的 效果 ,从 而 呈现 
给 访问 者 以 不 同 的 视觉 效果 ,吸引 访问 者 昌 作为 一 个 网 页 设计 者 ,要 在 网 页 设计 中 灵 
活 ,巧妙 地 运用 色彩 ,使 网 页 达到 各 种 精彩 效果 ,就 必须 对 色彩 的 相关 知识 有 深入 的 了 解 。 























17.1 色彩 原理 


在 五 彩 缤纷 的 生活 中 ,色彩 赋予 了 这 个 世界 更 多 的 活力 。 人 对 色彩 相当 敏感 ,在 浏览 一 
个 网 页 时 ,最 先 使 访问 者 注意 的 就 是 网 页 的 颜色 ,其 次 才 是 图 像 和 文字 。 下 面 介绍 色彩 的 相 


17.1.1 色彩 的 三 要 素 


色彩 的 形成 离 不 开光 的 作用 , 当 光 刺激 眼睛 的 时 候 , 就 会 使 视觉 产生 色彩 的 概念 ,也 就 
有 了 现在 的 这 个 被 色彩 泻 染 得 五 颜 六 色 的 世界 ,简单 地 说 ,色彩 是 一 种 视 知觉 ,是 光 作 用 于 

如 果 让 一 束 白光 从 狭 缝 射 人 黑色 的 房间 ,并 且 使 光 穿 过 三 棱镜 ,这 时 会 发 现 白光 被 分 离 
成 红 橙黄. 绿 . 青 , 蓝 、 紫 等 各 种 颜色 的 光 , 这 就 是 能 看 到 各 种 不 同 颜色 物体 的 原因 ,如 
图 17. 1 所 示 。 





直射 光线 





NN 


太阳 光线 


一 小 时 姻 菠 码 落 片 





图 17.1 三 棱镜 对 白光 的 分 解 
当 被 分 解 的 红 \、 橙 、 黄 \ 绿 、 青 、 蓝 、 紫 等 颜色 的 光 再 次 经 过 三 楼 镜 时 不 再 发 生 光 的 分 解 现 
象 ,这 样 的 光 就 被 称 为 单 色 光 。 而 红色 、 绿 色 、 蓝 色 的 光 被 称 为 三 原色 光 。 自 然 界 的 任何 色 
光 都 可 以 由 一 定 比 例 的 三 原色 光 组 合 而 成 ,如 红色 光 和 绿色 光 混 和 可 以 产生 黄色 光 , 红 色光 
和 蓝 色 光 混 和 可 以 产生 品 红色 光 , 蓝 色光 和 绿色 光 混 和 可 以 产生 青色 光 , 红 色 橙 黄 绿 青 蓝 紫 
光 、 绿 色光 、 蓝 色光 三 者 等 量 混 和 可 以 产生 白色 光 , 如 图 17. 2 所 示 。 
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图 17.2 三 原色 


紫红 、 黄 、 蓝 绿 3 种 颜色 称 为 色彩 三 原色 ,自然 界 的 任何 色彩 都 可 以 由 一 定 比 例 的 色彩 三 
原色 组 合 而 成 。 理 论 上 色彩 三 原色 等 量 混 和 可 以 得 到 黑色 ,紫红 色 和 黄色 混和 可 以 得 到 红 
色 , 紫 红色 和 蓝 绿色 混和 可 以 得 到 蓝 色 , 蓝 绿色 和 黄色 混和 可 以 得 到 绿色 。 


17.1.2 色彩 的 特征 

色彩 的 基本 特征 主要 表现 为 明度 .色相 、 纯 度 3 个 方面 。 明 度 表现 了 色彩 的 深浅 ,色相 表 
现 了 色彩 的 种 类 ,纯度 表现 了 色彩 的 鲜艳 程度 。 

1. 明度 


色彩 的 明度 ,简单 地 说 就 是 指 色彩 的 深浅 程度 。 光 量 越 多 ,明度 越 高 ,反之 明度 越 低 。 
色彩 的 明度 则 取决 于 混 色 中 白色 和 黑色 含量 的 多 少 。 关 于 明度 的 变化 如 图 17. 3 所 示 。 





图 17.3 明度 变化 


在 网 页 的 设计 中 如 果 底 色 是 黑 的 ,而 文字 也 选用 了 较 深 的 色彩 ,那么 由 于 色彩 的 明度 比 
较 接近 ,访问 者 在 浏览 的 时 候 , 眼 睛 就 会 感觉 很 吃力 ,影响 浏览 的 效果 。 当 然 , 色 彩 的 明度 也 
不 能 变化 太 大 ,否则 屏幕 上 的 亮度 反差 太 强 ,同样 也 会 使 访问 者 在 浏览 的 时 候 感 觉 到 刺眼 。 
际 上 日 本 色 配 色 体系 (Practical Color Coordinate System) 用 9 级 来 表示 明暗 , 门 赛 尔 则 用 
1 级 来 表示 明暗 ,两 者 都 用 一 连 串 数字 表示 明度 的 增 减 变 化 。 


2. 色相 
色彩 的 色相 ,简单 地 说 就 是 指 色彩 的 种 类 。 最 初 的 基本 色相 为 红 , 栖 . 黄 、 绿 、 蓝 、 紫 。 在 
各 色 中 间 加 插 一 两 个 中 间 色 ,其 头 尾 色相 , 按 光 谱 顺 序 为 红 、 杰 红 、 黄 检 、 黄 、 黄 绿 、 绿 、 绿 蓝 、 


蓝 绿 、 蓝 、 蓝 紫 、 紫 、 红 紫 、 红 和 紫 中 再 加 个 中 间 色 ,可 制 出 12 基本 色相 。 
色 轮 是 表示 最 基本 色相 关系 的 色 表 。 色 轮 上 90° 角 内 的 几 种 色彩 称 作 同类 色 , 也 叫 近邻 
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中 外 或 姐妹 色 。 90" 角 以 外 的 色彩 称 为 对 比 色 。 色 轮 上 相对 位 置 的 色 叫 补 色 ,也 叫 相 反 色 ,如 


图 17.4 所 示 。 
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图 17.4 色 轮 


一 般 来 说 ,在 网 页 设计 中 选择 暖色 相 , 即 红色 、 橙 色 黄色、 赭 色 等 色彩 的 搭配 ,可 以 使 网 
站 显得 温馨 .和 用 .热情 。 在 网 页 设计 中 选择 冷色 相 , 即 青色 绿色 、 紫 色 等 色彩 的 搭配 ,可 以 
使 网 站 显得 宁静 清凉, 高雅。 在 网 页 设计 中 选择 对 比 色相 , 即 把 色 性 完全 相反 的 色彩 搭配 
在 同一 个 空间 里 ,如 红 与 绿 、 黄 与 紫 \ 橙 与 蓝 等 的 搭配 ,可 以 产生 强烈 的 视觉 效果 。 


3. 纯度 


色彩 的 纯度 ,是 指 色彩 鲜艳 与 混浊 的 程度 ,也 称 为 彩 度 。 一 种 色相 纯度 ,也 有 强 弱 之 分 ， 
拿 正 红 来 说 ,有 人 鲜艳 无 杂质 的 纯 红 ,也 有 较 淡 薄 的 粉红 ,但 它们 的 色相 都 相同 ,只 是 强 弱 不 
一 。 纯 度 常用 高 低 来 描述 ,纯度 越 高 , 色 越 纯 , 越 艳 ; 纯 度 越 低 , 色 越 涩 , 越 池 。 纯 色 是 纯度 最 
高 的 一 级 。 色 彩 纯度 的 高 低 受 物体 表面 结构 .照射 光源 的 特点 以 及 视觉 生理 特性 的 影响 。 
关于 色彩 纯度 的 变化 如 图 17. 5 所 示 。 

掌握 明度 、 色 相 和 纯度 3 个 方面 的 知识 ,能 产生 良好 的 色彩 感 ,用 户 可 以 借助 Windows 
操作 系统 中 画图 程序 的 色 板 来 加 深 对 这 方面 知识 的 理解 ,下 面 我 们 再 集中 比较 三 者 之 间 的 
区 别 , 如 图 17. 6 所 示 , 展 示 明 度 、 色 相 和 纯度 不 同 的 推移 变化 。 
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17.2 色彩 的 对 比 


将 两 个 或 者 两 个 以 上 的 色彩 放 在 一 起 (包括 在 尽 可 能 接近 的 时 间 和 空间 里 ,也 就 是 说 在 
同一 视 域 ,最 好 在 同一 视 域 中 心 之 内 ) ,能 准确 地 发 现 色彩 的 异同 ,才能 最 充分 地 显示 出 应 有 
的 对 比 效果 。 充 分 地 理解 和 运用 色彩 的 对 比 , 对 设计 制作 网 页 尤为 重要 。 


17.2.1 明度 对 比 
明度 对 比 是 指 色彩 明暗 程度 的 对 比 , 也 称 色 彩 的 黑白 度 对 比 。 明 度 对 比 是 色彩 构成 中 


最 重要 的 因素 之 一 ,色彩 的 层次 与 空间 关系 主要 依靠 色彩 的 明度 对 比 来 表现 。 
用 黑色 和 白色 按 等 差 比例 相 混 ,建立 一 个 含 11 个 等 级 的 明度 色 标 ,如 图 17.7 所 示 。 





图 17.7 明度 色 标 
根据 明度 色 标 可 以 划分 为 3 个 明度 基调 。 
@ 低 明 基调 :由 0 一 3 级 的 暗色 组 成 的 基调 。 具 有 沉静 .厚重 .迟钝 ,忧郁 的 感觉 。 
ee 中 明基 调 :由 4 一 7 级 的 中 明 色 组 成 的 基调 。 具 有 和 柔和、 甜美 ,稳定 的 感觉 。 
e 高 明基 调 : 由 8 一 10 级 的 亮色 组 成 的 基调 。 具 有 优雅 ,明亮 寒冷 .软弱 的 感觉 。 
明度 对 比 的 强 弱 决定 于 色彩 明度 差别 的 大 小 。 
e 明度 弱 对 比 : 相 差 3 级 以 内 的 对 比 ,又 称 短 调 。 具 有 含蓄 ,模糊 的 特点 。 





e 明度 中 对 比 :相差 4 一 5 级 的 对 比 . 又 称 中 调 。 具 有 明确 .爽快 的 特 ， 

@ 明度 强 对 比 :相差 6 级 以 上 的 对 比 ,又 称 长 调 。 具 有 强烈 刺激 的 特点 。 

色彩 匹配 时 ,只 有 色相 的 对 比 而 无 明度 的 对 比 , 图 形 的 轮廓 难以 辨认 ;只 有 纯度 的 区 别 
而 无 明度 的 对 比 , 图 形 轮廓 更 为 模糊 。 可 见 , 色 彩 的 明度 对 比 在 色彩 构成 中 起 主导 作用 。 将 
相同 的 色彩 , 放 在 黑色 和 白色 上 ,比较 色彩 的 感觉 ,会 发 现 黑色 上 的 色彩 感觉 比较 亮 , 放 在 白 
色 上 的 色彩 感觉 比较 暗 , 这 就 是 明度 对 比 的 结果 。 

明暗 的 对 比 效果 非常 强烈 明显 ,对 配色 结果 产生 的 影响 ,明度 差异 很 大 的 对 比 ,会 让 人 
有 不 安 的 感觉 。 对 于 网 页 设计 中 的 色彩 的 应 用 来 说 ,明度 对 比 的 正确 与 否 ,是 决定 配色 的 光 
感 .明快 感 .清晰 感 以 及 心理 作用 的 关键 。 
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17.2.2 色相 对 比 


色相 对 比 是 基于 色相 差别 而 形成 的 对 比 。 色 相 的 差别 虽然 是 由 于 可 见 光 波长 的 长 短 差 
别 所 形成 ,但 不 能 完全 根据 波长 的 差别 来 确定 色相 的 差别 和 确定 色相 的 对 比 程度 。 

色相 对 比 的 强 弱 ,决定 于 色相 在 色相 环 上 的 距离 。 色 相距 离 在 15 以 内 的 对 比 ,一 般 看 
作用 色相 的 不 同 明度 与 纯度 的 对 比 , 因 为 距离 15 的 色相 属于 模糊 的 、 较 难 区 分 的 色相 ,这 样 
的 色相 对 比 称 为 邻接 色相 对 比 , 是 最 弱 的 色相 对 比 。 色 相距 离 在 15 以 上 .45 左右 的 对 比 , 称 
为 邻近 色相 对 比 , 或 近似 色相 对 比 ,是 软弱 的 色相 对 比 。 色 相距 离 在 130" 左 右 的 对 比 ,一 般 
称 为 对 比 色 相对 比 ,是 色相 中 对 比 。 色 相距 离 在 180 左右 的 对 比 , 称 互补 色相 对 比 , 是 色相 
强 对 比 。 色 相距 离 如 果 大 于 180”, 从 余下 的 弧度 来 看 ,必然 小 于 180", 所 以 距离 恰好 在 180” 
的 对 比 , 称 最 强 色相 对 比 。 色 相对 比 的 强 弱 可 以 由 色相 环 上 的 距离 来 表示 ,如 图 17. 8 所 示 。 


\ 


(a) 邻 近 色 对 比 (b) 补 色 对 比 
图 17.8 色相 对 比 


在 色相 对 比 中 邻接 色 、 类 似 色 为 色相 弱 对 比 ,中 差 色 为 色相 中 对 比 , 对 比 色 为 色相 强 对 
比 ,互补 色 为 色相 最 强 对 比 。 

e@ 邻接 色相 对 比 :邻接 色相 差 很 小 ,色彩 对 比 非常 微弱 ,因此 配色 易于 单调 ,必须 借助 
明度 、 纯 度 对 比 的 变化 来 弥补 色相 感 之 不 足 。 

e 类 似 色 相对 比 : 红 与 橙 、 橙 与 黄 、 黄 与 绿 、 绿 与 青青 与 紫 、. 紫 与 红 等 在 24 色相 环 上 间 
隔 15 一 60( 色 组 的 对 比 为 类 似 色 对 比 )。 类 似 色 相对 比 要 比邻 接 色相 对 比 明显 些 , 但 
是 仍然 比较 接近 。 类 似 色相 都 含有 共同 的 色素 , 它 既 保持 了 邻接 色 的 单纯 、 统 一 、 柔 
和 和 主 色调 明确 的 特点 ,同时 又 具有 含蓄 耐看 的 优点 .但 运用 类 似 色 配色 如 不 注意 
明度 和 纯度 变化 ,也 容易 流 于 单调 。 为 了 改变 色相 对 比 不 足 的 整 病 ,一 般 需要 运用 
小 面积 的 对 比 色 或 比较 鲜艳 的 色 作 点 缀 ,以 增加 色彩 生气 。 

。 中 差 色 相对 比 : 黄 与 红 、 红 与 蓝 、 蓝 与 绿 等 在 24 色相 环 上 间隔 60 一 120 的 色相 为 中 
差 色相 对 比 。 它 介 于 类 似 色相 和 对 比 色相 之 间 。 色 相差 比较 明确 ,色彩 对 比 效果 比 
较 明 快 ,是 色彩 设计 中 常用 的 配色 。 

e@ ”对比 色相 对 比 :色相 环 上 间隔 120" 一 160" 的 三 色 如 品 红 ` 黄 、 青 , 红 \ 黄 、 绿 青 , 橙 . 绿 、 
青紫 , 黄 橙 .青绿 、 紫 , 黄 、 绿 青 . 红 紫 等 色相 形成 的 色彩 对 比 为 对 比 色 相对 比 。 色 相 
环 上 的 品 红 、 黄 、 青 称 为 三 原色 的 对 比 。 色 环 上 构 、 绿 ,青紫 是 由 第 一 次 色 混 合 而 得 


的 间 色 的 对 比 。 间 色 的 对 比较 三 原色 的 对 比 缓和 。 色 相 环 上 间隔 90 左右 的 4 色 如 
红 \ 黄 .青绿 .青紫 , 橙 、 黄 绿 、 绿 青 、 紫 , 黄 栖 、. 绿 . 青 ` 红 紫 等 色 组 也 属于 对 比 色相 对 
比 。 对 比 色相 对 比 的 色 感 要 比 类 似 色相 鲜明 强烈 ,具有 饱满 .华丽 欢乐 .活跃 的 感 
情 特 点 ,容易 使 人 兴奋 、 激 动 。 

e@ 互补 色相 对 比 :色相 环 上 距离 180 左右 的 色相 为 互补 色相 对 比 , 是 最 强 的 色相 对 比 。 
如 红 、 青 绿 , 黄 、 青 紫 , 绿 、 红 紫 , 青 、 橙 等 色 组 。 互补 色 相配 ,能 使 色彩 对 比 达到 最 大 
的 鲜明 程度 ,并 强烈 地 刺激 感官 ,从 而 引起 人 们 视觉 上 足够 重视 和 达到 生理 上 的 满 
足 。 互补 色 相对 比 的 特点 是 强烈 鲜明 、 充 实 、 有 运动 感 ,但 是 容易 产生 不 协调 、 杂 
乱 、 过 分 刺激 动荡 不 安 、 粗 俗 生硬 等 缺点 。 要 想 把 互补 色相 对 比 组 织 得 倾向 鲜明 、 
统一 与 调和 ,配色 技术 的 难度 就 更 高 了 。 在 运用 同 种 色 、 邻 接 色 或 类 似 色 配色 时 ,如 
果 色 调 平淡 乏味 、 缺 乏 生气 ,那么 恰当 地 借用 补 色 对 比 的 力量 将 会 使 色彩 效果 得 到 

网 页 设计 中 ,在 使 用 色相 对 比 时 ,应 该 先 确定 主 色调 ,然后 明确 其 他 色彩 与 主 色调 是 什 

么 关系 ,要 表现 内 容 和 情感 ,增强 构成 色调 的 计划 性 、 明 确 性 与 目的 性 。 


17. 2.3 纯度 对 比 


纯度 对 比 是 由 纯度 差 引起 的 对 比 , 是 指 较 鲜 艳 的 色 与 模糊 的 浊 色 的 对 比 。 一 般 来 说 ,对 
比 色彩 间 纯 度 差 的 大 小 ,决定 彩 度 对 比 的 强 弱 ,对 比 色彩 之 间 的 纯度 差 越 大 ,对 比 就 越 强 ,就 
会 显得 鲜明 。 如 红色 与 橙色 的 纯度 比较 接近 ,这 两 个 色彩 之 间 的 对 比 效果 就 比较 弱 , 黄 色 与 
橙色 的 纯度 差 较 大 ,两 个 色彩 之 间 的 对 比 效果 比较 强烈 ,如 图 17. 9 所 示 。 
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图 17.9 纯度 对 比 


每 种 色彩 可 以 用 4 种 方法 降低 其 纯度 。 

e ”加 白 :纯色 混合 白色 ,可 以 降低 纯度 ,提高 明度 ,同时 色 性 偏 冷 。 昌 红 加 白 呈 带 蓝 味 
的 浅 红 ; 黄 加 白 变 冷 的 浅黄 ,各 种 色 混合 白色 以 后 都 会 产生 色 性 偏 冷 。 

ee 加 黑 :纯色 混合 黑色 , 即 降低 了 纯度 ,又 降低 了 明度 。 各 种 颜色 加 黑 以 后 ,会 失去 原 
有 的 光彩 ,而 变 得 沉着 .幽暗 ,同时 大 多 数 色 性 转 暖 。 

e ”加 灰 : 纯 色 混 入 灰色 以 后 ,纯度 逐步 降低 , 色 味 迅速 变 得 混浊 。 相 同 明度 的 纯色 与 灰 
色 混 合 ,可 以 得 到 丰富 的 相同 明度 、 不 同 纯度 的 含 灰 色 。 含 灰色 具有 和 柔和、 软弱 的 
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加 互补 色 : 任 何 纯色 都 可 以 用 相应 的 补 色 来 使 其 变 淡 。 纯 色 混 合 补 色 ,实际 上 相当 

于 混合 无 色 系 的 灰 , 因 为 一 定 比例 的 互补 色 混合 也 会 产生 灰 , 如 黄 加 紫 可 以 得 到 不 

同 的 灰 黄 。 如 果 互 补 色 相 混 合 ,再 用 白色 淡化 ,可 以 得 到 各 种 微妙 性 格 的 含 灰色 调 。 

在 应 用 色彩 中 ,单纯 的 纯度 对 比 很 少 出 现 , 其 主要 表现 为 包括 明度 、 色 相对 比 在 内 的 以 

纯度 为 主 的 对 比 ,可 构成 极其 丰富 的 色调 ,但 是 凡 以 纯度 对 比 为 主 构成 的 色调 ,其 最 大 特点 

就 是 含蓄 、 和 柔和、 耐人寻味 。 凡 过 分 生硬 、 刺 激 ,过 分 的 模糊 、 脏 、 灰 、 粉 的 配色 都 应 在 纯度 对 

比方 面 查找 原因 。 因 此 ,在 网 页 设计 中 当 色 调 发 生 苍白 无 力 和 干枯 乏味 的 现象 时 ,除了 调整 
色彩 间 明 度 对 比 关系 以 外 ,使 用 纯度 对 比 也 是 增添 生气 的 重要 手段 。 


17.2.4 冷暖 对 比 


因 冷 暧 差别 而 形成 的 色彩 对 比 称 为 冷暖 对 比 。 色 彩 的 冷暖 感觉 并 非 为 肌肤 的 温度 感 
觉 ,而 是 人 们 对 视觉 色彩 的 一 种 心理 反应 , 它 与 人 们 的 生活 经 验 相 联 系 ,是 联想 的 结果 。 

一 般 来 说 红色 黄色、 橙色 往往 使 人 联想 起 阳光 .火花 ,从 而 与 温暖 的 感觉 联系 起 来 。 青 
色 、 蓝 色 会 使 人 联想 起 晴空 大 海 .夜晚 及 阴影 ,从 而 与 清凉 的 感觉 联系 起 来 。 色 彩 的 冷暖 感 
觉 也 与 生理 的 刺激 有 关 , 红 色 、 栖 色 的 刺激 能 加 快 血液 循环 ,青色 、 蓝 色 的 刺激 能 降低 血液 循 
环 速度 ,前 者 因 血 液 循环 加 快 而 体温 上 升 , 后 者 因 血 液 循环 减 慢 而 体温 下 降 , 从 而 使 人 有 了 
冷暖 的 感觉 。 

色彩 的 冷暖 感 主要 巾 色相 决定 , 红 \ 橙 、 黄 为 暖色 系 ; 青 绿 、 青 、 蓝 为 冷色 系 ; 绿 、 紫 为 中 性 
色 系 ,如 图 17. 10 所 示 。 不 同色 相 的 冷暖 以 含有 红 橙 和 青 蓝 的 比例 而 定 。 其 次 ,在 同一 色相 
中 ,明度 的 变化 也 会 引起 冷暖 倾向 的 变化 , 凡 掺 和 白 而 提高 明度 者 色 性 趋向 冷 , 凡 掺 和 黑 降 
低 明度 者 色 性 趋向 暧 。 色 彩 的 冷暖 性 质 不 是 绝对 的 , 它 往往 与 色 性 的 倾向 有 关 , 同 为 暖色 
系 , 偏 青 光 者 相对 倾向 于 冷 , 偏 红 光 者 则 相对 倾向 于 暧 。 同 为 冷色 系 , 偏 青 光 者 相对 倾向 于 
冷 , 偏 红 光 者 相对 倾向 于 暖 , 因 此 色彩 的 冷暖 感觉 常常 由 偏离 基本 色 的 倾向 色 所 决定 。 


(a) 上 暖色 调 (b) 冷 色调 
图 17.10 冷暖 色调 对 比 


色彩 的 冷暖 对 比 在 色彩 艺术 中 具有 丰富 的 表现 力 ,伊顿 认 为 冷暖 色 可 以 用 一 些 相对 应 
的 术语 来 表示 。 


@ ” 冷色: 透明、 镇静、 阴影 ,稀薄 、 空 气 感 ,遥远 、 轻 的 ,潮湿 。 
(dN: 


e 暖色 :不 透明 、 刺 激 \ 日 光 , 浓 密 、 土 质感 、 重 的 .干燥 。 

在 网 页 设计 中 ,适当 地 运用 色彩 的 冷暖 对 比 不 仅 可 以 增强 远近 距离 感 ,而 且 可 以 加 强 色 
彩 的 艺术 感染 力 。 色 彩 的 明暗 对 比 虽 然 能 强化 素描 层次 ,但 是 易于 单调 乏味 ,如 果 同 时 采用 
冷暖 转换 ,冷暖 调节 等 方法 ,那么 色彩 效果 就 会 显得 更 加 生动 活泼 。 

色彩 对 比 运用 得 是 否 得 当 , 是 网 页 配色 成 功 与 否 的 关键 。 用 户 在 学 习 这 部 分 内 容 时 ,可 
以 借助 于 互联 网 上 配色 比较 好 的 网 页 作品 和 一 些 平面 广告 作品 ,从 视觉 的 角度 来 加 深 对 知 
识 的 理解 。 


17.3 色彩 的 混合 


在 网 页 配色 过 程 中 ,如 果 对 色彩 的 混合 规则 有 所 了 解 , 对 于 设计 是 很 有 帮助 的 ,下 面 简 
单 地 介绍 色彩 混合 。 一 般 来 说 色彩 混合 分 为 加 光 混 合 、 减 光 混 合 与 中 性 混合 3 个 类 型 。 
e 加 光 混 合 : 加 光 混 合 属于 投 照 光 的 混合 。 将 光源 体 辐射 的 光合 照 一 处 ,可 以 产生 出 
新 的 色光 。 如 在 一 间 没 有 光源 的 屋子 中 ,对 于 屋子 的 墙壁 来 说 ,没有 光照 时 ,在 黑暗 
中 人 们 的 眼睛 无 法 看 到 它 。 而 当 墙壁 只 被 红 光 照 亮 时 会 呈 红 色 , 被 绿 光照 亮 时 会 呈 
绿色 , 红 绿 光 同时 照 的 墙 面 则 呈 黄 色 ,而 这 黄色 的 色相 与 纯度 便 在 红 绿 色 之 间 , 其 亮 
度 高 于 红 ,也 高 于 绿 , 接 近 红 绿 亮度 之 和 ,由 于 投 照 光 混合 之 后 变 亮 了 ,所 以 称 为 加 
光 混合 。 

。 减 光 混 合 : 指 不 能 发 光 , 却 能 将 照 来 的 光 吸 掉 一 部 分 ,将 剩 下 的 光 反 射出 去 的 混合 。 
色 料 不 同 吸收 色光 的 波长 与 亮度 的 能 力也 不 同 。 色 料 混合 之 后 形成 的 新 色 料 ,一 般 
都 能 增强 吸光 的 能 力 ,前 弱 反 光 的 亮度 ,在 投 照 光 不 变 的 条 件 下 ,新 色 料 的 反光 能 力 
低 于 混合 前 的 色 料 的 反光 能 力 的 平均 数 ,因此 新 色 料 的 明度 降低 了 ,纯度 也 降低 了 ， 
所 以 称 为 减 光 混 合 。 

。 中 性 混合 :是 指 混成 色彩 既 没有 被 提高 ,也 没有 被 降低 。 中 性 混合 主要 有 人 色 盘旋 转 

混合 与 空间 视觉 混合 。 

把 红 , 检 、 黄 、 绿 、 蓝 、 紫 等 色 料 等 量 地 涂 在 圆 盘 上 ,旋转 之 , 即 呈 浅 蓝 色 。 在 色 盘 上 , 红 与 
黄 就 旋 出 粉 彩色 , 青 与 黄 旋 出 粉 绿色 , 红 与 蓝 旋 出 粉 紫色 ,这 样 的 混合 为 色 盘 旋转 混合 。 站 
在 铁路 上 ,可 以 看 见 眼前 的 两 根 铁轨 伸 向 远方 ,最 后 消失 在 地 平 线 上 的 一 点 。 如 果 两 根 铁轨 
各 有 各 的 色彩 ,经 过 一 定 的 距离 ,两 根 铁轨 合成 一 点 之 后 ,两 种 色彩 也 会 合成 一 种 新 的 色彩 ， 
于 是 色彩 的 合 一 就 称 为 色 的 空间 视觉 混合 。 


17.4 色彩 的 心理 效应 


色彩 的 心理 效应 一 般 是 指 色彩 对 人 的 眼睛 和 心理 所 产生 的 影响 。 同 一 色彩 及 同一 对 比 
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的 调和 效果 , 均 可 能 有 多 种 效应 ,多 种 色彩 及 多 种 对 比 的 调和 效果 ,也 可 能 有 极为 相近 的 功 
能 。 在 网 页 设计 中 ,为 了 更 恰如其分 地 应 用 色彩 及 其 对 比 的 调和 效果 ,使 之 与 形象 的 塑造 ， 
表现 与 美化 统一 ,使 形象 的 外 表 与 内 在 统一 ,使 页 面 的 色彩 与 内 容 、 气 氛 、 感 情 等 表现 要 求 统 
一 ,使 配色 与 改善 视觉 效能 的 实际 需求 统一 ,使 色彩 的 表现 力 、 视 觉 作 用 及 心理 影响 最 充分 
地 发 挥 出 来 ,给 浏览 者 的 眼睛 与 心灵 以 充分 的 愉快 ,刺激 和 美的 享受 ,必须 对 色彩 的 心理 效 
应 作 深入 地 研究 。 





1. 红色 


红色 容易 引起 注意 .兴奋 、 激 动 和 紧张 。 红 色光 由 于 波长 最 长 ,在 视网膜 上 成 像 的 位 置 
最 深 ,给 视觉 以 逼近 的 扩张 感 ,被 称 为 前 进 色 。 在 自然 界 中 .不 少 芳香 艳丽 的 鲜花 ,以 及 丰硕 
甜美 的 果实 ,和 不 少 新 鲜美 味 的 肉 类 食品 ,都 呈现 出 动人 的 红色 。 因 此 在 生活 中 ,人 们 习惯 
以 红色 为 兴奋 与 欢乐 的 象征 ,使 之 在 标志 、 旗 帜 .宣传 等 用 色 中 占 了 首位 ,成 为 最 有 力 的 宣传 
色 。 但 是 纵火 成 灾 、 流 血 为 褐 , 这 样 的 红色 又 被 看 成 危险 .灾难 、 爆 炸 、 您 怖 的 象征 色 。 因 此 
人 们 也 习惯 地 引 作 预 警 或 报警 的 信号 色 。 

总 之 ,红色 的 纯度 高 ,注目 性 高 ,刺激 作用 大 ,人 们 称 之 为 “ 火 与 血 ” 的 色彩 ,能 增高 血压 
加 速 血液 循环 ,对 于 人 的 心理 产生 巨大 的 鼓舞 作用 。 


2. 翠绿 色 


在 自然 界 中 ,植物 大 多 呈 绿 色 , 人 们 称 绿色 为 生命 之 色 , 并 把 它 作为 农业 、 林 业 、 畜 牧 业 
的 象征 色 。 由 于 绿色 体 的 生物 和 其 他 生物 一 样 ,具有 诞生 发 育 .成 长 .成熟 ,衰老 到 死亡 的 
过 程 ,这 就 使 绿色 出 现 各 个 不 同 阶段 的 变化 ,因此 黄 绿 .嫩绿 、 淡 绿 就 象征 着 春天 和 作物 稚 
嫩 、 生 长 .青春 与 旺盛 的 生命 力 。 艳 绿 、 盛 绿 、 浓 绿 ,象征 着 夏天 和 作物 茂盛 ,健壮 与 成 熟 。 灰 
绿 \ 土 绿 、 褐 绿 便 意 味 着 秋冬 和 农作物 的 成 熟 衰老 。 

总 之 绿色 为 植物 的 色彩 ,绿色 的 明度 不 高 ,刺激 性 不 大 ,对 生理 作用 和 心理 作用 都 极为 
温和 ,给 人 以 宁静 、 休 息 , 使 人 的 精神 不 易 疲 劳 。 


3. 黄色 


黄色 光 的 光 感 最 强 , 给 人 以 光明 、 辉 煌 、 轻 快 、 纯 净 的 印象 。 在 自然 界 中 ,腊梅 .迎春 、 秋 
菊 以 至 油菜 花 \ 向 日 葡 等 ,都 大 量 地 呈现 出 美丽 娇嫩 的 黄色 。 秋 收 的 五 谷 , 水 果 , 以 其 精美 的 
黄色 ,在 视觉 上 给 人 以 美的 享受 。 在 生活 中 ,在 相当 长 的 历史 时 期 ,帝王 与 宗教 传统 上 均 以 
辉煌 的 黄色 作 服 饰 ; 家 具 、 宫 殿 与 庙宇 的 色彩 ,都 相应 地 加 强 了 黄色 ,给 人 以 崇高 、 智 慧 、 神 
秘 、 华 贵 .威严 和 仁慈 的 感觉 。 但 由 于 黄色 有 波长 差 不 容 易 分 辨 轻薄 、 软 弱 等 特点 ,黄色 物体 
在 黄色 光照 下 有 失色 的 现象 , 故 植物 呈 灰 黄色 ,就 被 看 作 病 态 , 色 昏 黄 , 便 预告 着 风沙 、 冰 看 
或 大 雪 , 因 而 有 象征 酸 涩 、 病 态 和 反常 的 一 面 。 

总 之 黄色 是 最 为 光亮 的 色 , 在 有 彩色 的 纯色 中 明度 最 高 .给 人 以 光明 、 迅 速 \ 活 泼 轻快 的 
感觉 。 它 的 明 视 度 很 高 ,注目 性 高 ,比较 温和 。 


4. 橙 色 


梯 色 又 称 枯黄 或 桔 色 。 在 自然 界 中 , 橙 柚 、 玉 米 、 鲜 花 果实 、 霞 光 、 灯 彩 等 都 有 丰富 的 橙 
色 。 因 其 具有 明亮 ,华丽 、 健 康 、 兴 奋 温暖 ,欢乐 ,辉煌 以 及 容易 动人 的 色 感 ,所 以 妇女 们 喜 
以 此 色 作 为 装饰 色 。 橙 色 在 空气 中 的 穿 透 力 仅 次 于 红色 ,而 色 感 较 红色 更 暖 ,最 鲜明 的 橙色 
应 该 是 色彩 中 感受 最 暖 的 色 ,能 给 人 庄严 .尊贵 .神秘 等 感觉 ,所 以 基本 上 属于 心理 色 性 。 历 
史上 许多 权贵 和 宗教 界 都 用 以 装点 自己 ,现代 社会 上 往往 作为 标志 色 和 宣传 色 。 不 过 也 是 
容易 造成 视觉 疲劳 的 色 。 

橙色 的 刺激 作用 虽然 没有 红色 大 ,但 它 的 视 认 性 和 注目 性 也 很 高 , 既 有 红色 的 热情 ,又 
有 黄色 的 光明 ,活泼 的 性 格 ,是 人 们 普遍 喜爱 的 色彩 。 


5. 蓝 色 


在 可 见 光谱 中 , 蓝 色光 的 波长 短 于 绿色 光 , 而 比 紫 色光 上 略 长 些 , 穿 透 空气 时 形成 的 折射 
角度 大 ,在 空气 中 辐射 的 直线 距离 短 。 每 天 早上 与 傍晚 ,太阳 的 光线 必须 穿越 比 中 午 厚 三 倍 
的 大 气 层 才能 到 达 地 面 , 其 中 蓝 紫 光 早已 折射 ,能 达到 地 面 的 只 是 红 黄 光 。 所 以 早晚 能 看 见 
的 太阳 是 红 黄 色 的 ,只 有 在 高 山 、 远 处 地平线 附近 , 才 是 蓝 色 的 。 它 在 视网膜 上 成 像 的 位 置 
最 浅 。 如 果 红 橙色 被 看 做 前 进 色 时 ,那么 蓝 色 就 应 是 后 退 的 远 渐 色 。 蓝 色 的 所 在 ,往往 是 人 
类 所 知 甚 少 的 地 方 ,如 宇宙 和 深海 。 古 代 的 人 认为 那 是 天 神 水 怪 的 住所 , 令 人 感到 神秘 葛 
测 。 现 代 的 人 把 它 作为 科学 探测 的 领域 。 因 此 蓝 色 就 成 为 现代 科学 的 象征 色 。 

蓝 色 的 注目 性 和 视 认 性 都 不 太 高 ,但 在 自然 界 中 天 空 .海洋 均 为 蓝 色 , 所 占 面 积 相当 大 。 
蓝 色 给 人 冷静 ,智慧 ,深远 的 感觉 。 


6. 紫色 


在 可 见 光 谱 中 ,紫色 光 的 波 最 短 。 尤 其 是 看 不 见 的 紫外 线 更 是 如 此 。 因 此 ,眼睛 对 紫色 
光 的 细微 变化 的 分 辨 力 很 弱 ,容易 引起 疲劳 。 紫 色 给 人 以 高 贵 .优越 、. 幽 雅 .流动 ,不 安 等 感 
觉 。 灰 暗 的 紫色 只 是 伤 痛 、 疾 病 以 及 尸 斑 的 色 ,容易 造成 心理 上 的 忧郁 痛苦 和 不 安 。 不 少 民 
族 都 把 它 看 做 是 消极 和 不 祥 的 色 。 浅 紫色 则 是 鱼 胆 的 色 , 容 易 让 人 联想 到 鱼 胆 的 苦涩 和 内 
脏 的 腐败 。 因 此 ,紫色 还 具有 表现 苦 、 毒 与 恐怖 的 功能 。 但 是 ,明亮 的 紫色 好 像 天 上 的 霞光 ， 
原野 上 的 鲜花 ,情人 的 眼睛 ,动人 心神 ,使 人 感到 美好 ,因而 常用 来 象征 男女 间 的 爱情 。 在 某 
些 地 方 , 如 果 紫 色 用 得 不 当 , 便 会 产生 低级 、 荒 泽 和 丑恶 的 印象 。 


7. 和 白色 


白色 是 全 部 可 见 光 均 匀 混 合 而 成 的 , 称 为 全 色光 ,是 光明 的 象征 色 。 白 色 明 亮 . 干 净 、 畅 
快 `, 朴 素 、 雅 致 与 贞洁 。 白 色 为 不 含 纯度 的 色 , 除 因明 度 高 而 感觉 冷 外 基本 为 中 性 色 , 明 视 度 
及 注目 性 方面 都 相当 高 ,由 于 白色 为 全 色相 ,能 满足 视觉 的 生理 要 求 ,与 其 他 色彩 混合 均 能 
取得 很 好 的 效果 。 
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8. 黑色 


黑色 为 全 色相 ,也 是 没有 纯度 的 色 ,与 白色 相 比 给 人 以 暖 的 感觉 ,黑色 在 心理 上 是 一 个 
很 特殊 的 色 , 它 本 身 无 刺激 的 色 性 ,但 是 与 其 他 色 配 合 能 增加 刺激 ,黑色 是 消极 色 , 所 以 一 般 
不 单独 使 用 ,可 是 与 其 他 色彩 配合 均 能 取得 很 好 的 效果 。 


9. 灰色 


灰色 原意 是 灰尘 的 色 。 从 光学 上 看 , 它 居 于 白色 与 黑色 之 间 , 居 中 等 明度 , 属 无 彩 度 及 
低 彩 度 的 色彩 。 灰 色 为 全 色相 ,也 是 没有 纯度 的 中 性 色 , 完 全 是 一 种 被 动 性 的 色 ,由 于 视觉 
最 适应 看 配色 的 总 和 为 中 性 灰色 ,所 以 灰色 是 最 为 值得 重视 的 色 , 它 的 视 认 性 、 注 目 性 都 很 
低 。 所 以 很 少 单独 使 用 ,但 灰色 很 顺从 ,与 其 他 色彩 配合 可 取得 很 好 的 效 

在 制作 网 站 时 ,色彩 的 选择 和 搭配 十 分 的 重要 .因为 一 个 网 站 格调 的 确定 ,往往 取决 于 
色彩 的 选择 与 搭配 是 否 适当 。 具 体 地 说 ,网 站 的 主 色调 是 由 网 站 的 主题 来 决定 的 。 如 健康 
类 的 网 站 就 不 适合 采用 较为 刺激 的 大 红 和 黄 、 橙 以 及 象征 死亡 和 神秘 的 黑色 和 紫色 ,这 样 会 
造成 一 种 紧张 和 某 种 程度 的 恐慌 ,以 及 一 些 不 利于 健康 的 联想 。 此 外 网 站 色彩 往往 不 能 单 
纯 的 运用 ,要 考虑 诸多 的 因素 ,如 访问 者 的 类 别 、 社 会 背景 心理 需求 和 场合 的 差异 等 ,这 就 
要 求 网 站 设计 者 要 认真 地 分 析 网 站 的 面向 对 象 ,各 个 方面 综合 考虑 。 另 外 网 站 设计 的 用 色 
也 要 特别 的 关注 流行 色 的 发 展 。 每 年 日 本 或 者 欧美 都 要 发 布 一 批 流行 色 , 这 是 从 大 量 的 人 
们 的 喜好 中 挑选 出 来 的 ,将 这 种 流行 色 应 用 到 网 站 中 去 ,就 会 使 网 站 富有 朝气 ,更 受 欢迎 。 


17.5 网 页 色彩 应 用 


前 面 介 绍 了 在 网 页 设计 中 选择 主 色 调 所 应 该 遵循 的 一 些 规律 。 本 节 介绍 网 页 色彩 运 
用 。 在 网 页 设计 中 ,选择 一 些 颜 色 进行 搭配 组 合 ,目的 都 是 要 使 网 页 作品 达到 一 定 的 视觉 
效果 。 


17.5.1 网 页 色彩 搭配 


不 同 的 网 站 有 着 自己 不 同 的 风格 ,也 有 着 自己 不 同 的 色调 ,由 于 每 种 颜色 都 有 其 不 同 的 
代表 意义 ,所 以 在 网 页 配色 时 ,要 充分 地 考虑 各 种 色彩 所 代表 的 意义 是 否 和 网 站 的 主题 一 致 
® 行业 色彩 :每 个 行业 都 有 其 特定 的 标志 色彩 ,在 网 页 配色 时 ,要 充分 地 考虑 其 色彩 的 
特点 ,政府 网 站 要 以 红色 搭配 ,以 体现 它 的 严肃 性 ,环保 网 站 一 般 采 用 绿色 搭配 ,以 
体现 它 的 行业 特点 ,如 国际 环保 组 织 的 网 站 ,以 绿色 为 主 色调 。 
区域 色 彩 :地 球 上 不 同 的 区 域 有 着 不 同 的 代表 颜色 ,如 蓝 色 代表 着 海洋 ,黄色 代表 着 
沙漠 ,绿色 代表 着 森林 ,白色 代表 冰雪 。 不 同 区 域 的 网 站 色彩 应 该 是 不 同 的 。 





e 企业 色彩 :现代 企业 中 .公司 的 CI 形象 显得 尤其 重要 ,每 一 个 公司 的 CI 设计 必然 要 
有 标准 的 颜色 。 比 如 著名 的 可 口 可 乐 公 司 大 家 都 非常 的 熟悉 ,使 用 红色 作为 主 色 
调 ,同时 形象 宣传 海报 广告 使 用 的 颜色 以 及 网 站 的 颜色 一 致 。 

e 宗教 色彩 :每 个 宗教 也 有 其 自身 的 代表 颜色 ,这 些 颜 色 象 征 着 吉祥 、 神 圣 。 如 在 西方 
的 宗教 世界 里 ,紫色 代表 着 尊贵 。 在 伊朗 淡 紫色 代表 着 伊斯兰 教 的 吉祥 色 。 

e 风格 色彩 :现在 的 社会 倡导 个 性 ,所 以 网 页 作品 也 是 个 性 的 展现 。 个 性 网 站 的 色彩 
没有 严格 的 限制 ,只 要 能 体现 作者 的 个 性 即 可 。 
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17.5.2 网 页 配色 案例 


颜色 的 使 用 在 网 页 制作 中 起 着 非常 关键 的 作用 ,有 很 多 网 站 以 其 成 功 的 色彩 搭配 令 人 
过 目 不 忘 。 但 是 对 于 刚 开 始 学 习 制 作 网 页 的 人 来 说 ,往往 不 容易 驾驭 好 网 页 的 颜色 搭配 。 
除了 学 习 各 种 色彩 理论 和 方法 之 外 ,多 借鉴 一 些 著名 网 站 的 用 色 方法 ,对 于 设计 网 页 可 以 起 
到 事半功倍 的 作用 。 下 面 介绍 一 些 著名 网 站 的 颜色 搭配 方案 ,希望 能 对 用 户 有 所 局 发 ,并 且 
通过 对 这 些 网 站 配色 方案 的 介绍 ,使 用 户 也 能 自己 提炼 优秀 网 站 的 配色 方案 。 


1. 微软 中 国 公司 网 站 


微软 中 国 公司 的 网 站 大 家 都 很 熟悉 ,从 它 网 页 的 颜色 搭配 中 可 以 看 出 微软 公司 的 风格 、 
作风 ,如 图 17. 11 所 示 。 其 整体 配色 方案 为 : 
@ 页 眉 页 脚 使 用 蓝 色 ,RGB 为 (8,109,260)。 
主体 背景 使 用 白色 ,RGB 为 (255 ,255 ,255)。 
菜单 背景 为 灰 黑 色 ,RGB 为 (247,243,247) 。 
菜单 文字 为 黑色 ,RGB 为 (0,0,0) 。 
主体 文字 为 深蓝 色 ,RGB 为 (0,48.156)。 











图 17.11 微软 公司 网 站 





新 编 网 页 制作 入 门 与 提高 





2. NBA 官方 网 站 


该 网 站 是 著名 的 美国 NBA 篮球 官方 网 站 ,如 图 17. 12 所 示 。 其 整体 配色 方案 为 : 
e@ 主体 背景 使 用 灰色 ,RGB 为 (229,229,227) 。 

@ 菜单 背景 为 蓝 色 ,RGB 为 (24,52,132)。 

e@ 菜单 文字 为 白色 ,RGB 为 (255,255,255) 。 

e 文字 标题 为 深蓝 色 ,RGB 为 (0,48.156) 。 





图 17.12 NBA 官方 网 站 


3. AMD 中 国 公司 网 站 


该 网 站 为 著名 的 芯片 制作 商 的 网 站 ,如 图 17. 13 所 示 。 其 整体 配色 方案 为 
e@ 页 眉 页 脚 使 用 白色 ,RGB 为 (255,255,255)。 

主体 背景 使 用 白色 ,RGB 为 (255 ,255 ,255)。 

菜单 文字 为 深 绿色 ,RGB 为 (0,101.49) 。 

标题 背景 为 深 红色 ,RGB 为 (153,0,51)。 

标题 文字 为 白色 ,RGB 为 (255 ,255,255)。 











图 17.13 AMD 网 站 





4. Adobe 公司 网 站 


页 眉 页 脚 使 用 白色 ,RGB 为 (255,255,255) 。 
主体 背景 使 用 白色 ,RGB 为 (255,255,255) 。 
菜单 文字 为 浅 黑 色 ,RGB 为 (85 .85 ,85)。 
标题 背景 为 浅 灰色 ,RGB 为 (227,227,227) 。 
标题 文字 为 浅 绿色 色 ,RGB 为 (0,68,119)。 


i 














图 17.14 Adobe 网 站 


网 站 为 著名 的 软件 开发 商 的 网 站 ,如 图 17. 14 所 示 。 其 整体 配色 方案 为 : 
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8 
= 本 章 内 容 包括 ; 


全 版 式 设计 的 造型 元 素 
全 版 式 构成 原理 
全 版 式 视 觉 原 理 
全 版 式 构成 类 型 


本 章 要 点 : 

网 页 版 式 设计 ,是 将 文字 、 图 形 图 像 动 画 、 视 频 等 网 页 元 素 ,根据 特定 的 内 容 和 主题 ,在 
网 页 所 限定 的 范围 中 ,运用 造型 元 素 和 形式 原理 进行 视觉 的 关联 与 配置 ,从 而 将 设计 意图 以 
视觉 形式 表现 出 来 。 

在 网 页 设计 领域 ,很 长 时 间 以 来 版 式 设计 被 认为 是 技术 性 工作 ,网 页 的 设计 和 制作 主要 
守成 .他们 只 是 习惯 性 地 规定 一 种 格式 ,习惯 性 地 放 入 文字 和 符合 需要 的 图 形 
ES 
在 ,人 们 越 来 越 认识 到 版 式 设计 在 网 页 设计 中 的 重要 作用 . 它 是 技术 和 艺术 的 高 度 统一 。 














18.1 网 页 版 式 设计 基础 


网 页 版 面 不 同 于 传统 意义 上 的 报纸 杂志、 平面 广告 等 具有 固定 的 版 面 尺寸 。 

首先 ,在 水 平方 向 上 ,由 于 大 多 数 人 的 显示 器 分 辩 率 设置 为 800 像素 X600 像素 或 1024 
像素 X768 像素 ,在 网 页 设计 时 应 以 800 像素 X600 像素 为 标准 ,除去 滚动 条 占用 的 20 像素 ， 
安全 宽度 应 控制 在 780 像素 以 内 ,才能 浏览 到 全 部 页 面 内 容 。 而 在 分 辩 率 1024 像素 X768 
像素 的 设置 下 ,页面 内 容 只 占 版 面 空间 的 一 部 分 ( 居 左 或 居中 ) ,其 余 空间 为 背景 色 。 

其 次 ,在 垂直 方向 上 ,由 于 页 面 是 可 以 滚动 的 ,版 面 的 长 度 不 做 限制 。 因 而 这 样 一 个 动 
态 的 、 变 化 的 版 面 空间 ,给 版 式 设计 增加 了 难度 。 

为 避免 版 面 空间 的 不 固定 给 网 页 设计 带 来 的 负面 影响 ,取得 较 好 的 版 面 视觉 效果 ,很 多 
网 页 在 设计 时 采取 了 相应 的 措施 : 

@ 将 背景 作 适 当 设计 ,以 适应 不 同 分 辩 率 的 版 面 效果 。 

@ 应 用 自动 适合 宽度 的 技术 , 当 版 面 宽 度 大 于 800 像素 时 ,页 面 内 容 会 自动 伸缩 ,充满 

整个 版 面 宽度 ,这 一 技术 对 版 式 设计 提出 了 更 高 的 要 求 ,以 适应 不 同 的 版 面 宽度 。 

在 网 页 界面 中 ,各 种 具体 、 抽 象 的 形象 按 其 形态 、 大 小 的 不 同 均 可 以 归纳 为 相应 的 点 、 
线 、 面 ,因而 ,点 、 线 , 面 \ 空 白 的 关系 从 本 质 上 反映 了 客观 世界 普遍 存在 的 对 立 统 一 的 关系 。 
版 式 中 点 、 线 、 面 ,空白 的 成 分 兼 而 有 之 、 相 互 影 响 ,往往 能 使 观众 在 视觉 上 得 到 满足 。 根 据 
点 、 线 , 面 . 空 白 各 自 不 同 的 感觉 属性 ,将 它们 灵活 处 理 ,以 产生 各 种 生动 的 页 面 版 式 效 果 。 


18.2 网 页 版 式 构成 原理 


自然 界 的 万 事 万 物 , 从 宏观 的 宇宙 到 微观 的 原子 分子, 到 处 都 存在 着 内 在 的 规律 性 。 
网 页 版 式 设计 和 其 他 视觉 形式 一 样 ,也 遵循 这 些 规律 。 具 有 秩序 感 的 版 式 设计 ,善于 将 各 组 
成 部 分 系统 化 ,整体 化 ,处 理 好 相互 关系 ,在 整体 秩序 中 体现 出 美感 。 版 式 设计 的 造型 元 素 
相互 依赖 .相互 组 织 . 相 互 配合 ,体现 出 构成 方式 的 规律 性 ,具体 包括 比例 对称、 均衡 .反复 、 
渐变 ,节奏 韵律 、 统 一 \ 变 化 等 。 


18.2.1 比例 


比例 是 部 分 与 部 分 之 间 ,部 分 与 整体 之 间 的 比率 关系 。 整 体形 式 中 一 切 有 数量 的 条 件 ， 
如 长 得, 大小、 宽窄 .明暗 .多 少 等 ,在 搭配 适当 时 均 能 产生 优美 的 比例 。 比 例 具 有 强烈 的 数 
理 概 念 ,设计 中 常用 的 比例 均 可 用 数学 或 几何 学 的 方法 求 出 。 例 如 ,黄金 分 割 率 把 线段 分 成 
两 段 ,发 现 1: 1. 618 的 数 比 关系 构成 了 美的 标准 尺度 。 


网 页 版 式 设计 中 页 面 的 长 宽 比 内 容 与 空白 面积 的 比 、 页 面 结 构 分 割 比 ,图 文 关系 比 以 
及 各 种 网 页 元 素 内 部 的 比例 等 比例 关系 使 页 面 各 部 分 之 间 产 生 相 互联 系 ,使 版 式 和 谐 、 匀 
称 、 明 朗 。 

例如 ,在 如 图 18. 1 所 示 网 页 页 面 中 ,上 下 的 灰 蓝 色 块 宽度 远大 于 高 度 , 让 人 感觉 左右 视 
时 开阔 ,左下 角 的 导航 照片 和 右边 的 灰 底 色 均 采用 了 接近 黄金 矩形 的 比例 ,视觉 上 极为 舒 
适 。 如 图 18. 2 所 示 小 图 标 处 于 页 面 宽度 的 黄金 分 割 点 位 置 , 如 同 页 面 的 支点 ,此 种 比例 的 分 
割让 页 面 稳定 而 不 失灵 活 。 


第 
5 
章 
网 
页 
设 
计 





18. 2.2 重复 与 渐变 





重复 是 相同 或 相似 的 形态 连续 而 有 规律 的 反复 出 现 。 重 复 的 特点 是 以 单纯 的 手法 求 得 
整体 形象 的 秩序 和 统一 ,具有 节奏 美 .使 人 产生 清晰 、 连 续 、 平 和 安定 、 无 限 之 感 。 重 复 可 分 
为 单纯 重复 和 变化 重复 两 种 形式 。 单 纯 重 复 是 单一 基本 形 的 反复 再 现 ,其 形状 、 大 小 、 方 向 











Wad ee ei ee ail i Ne 
都 是 相同 的 ,这 种 重复 体现 了 一 种 标准 化 、 追 求 简约 的 特征 。 在 网 页 界面 中 ,单纯 重复 多 
于 具有 同一 基本 形 的 图 案 、 底 纹 中 。 
在 如 图 18. 3 所 示 的 网 页 中 主体 图 片 中 间 有 一 排 重 复 排 列 的 3 个 长 方形 图 形 , 图 形 中 的 
图 案 各 异 ,这 种 变化 是 为 避免 重复 的 单调 ,或 者 在 重复 中 有 变化 ,这 种 重复 既 整 齐 又 具 多 样 
性 ,因而 在 网 页 版 式 中 经 常 被 用 作 通 向 其 他 页 面 的 超 链接 。 























图 18.3 重复 构图 
渐变 是 形态 有 规律 地 连续 变化 , 它 通过 类 似 的 形态 获得 了 形式 的 统一 。 渐 变 能 让 相互 
对 立 的 两 极 形成 过 渡 , 从 而 达到 统一 ,如 色彩 的 黑 与 白 之 间 、 形 态 的 大 与 小 之 间 等 。 渐 变 体 
现 了 形态 的 发 展 变化 过 程 ,让 人 感觉 含蓄 ,柔和 ,具有 强烈 的 时 间 和 空间 特征 。 网 页 界面 中 ， 
各 种 造型 元 素 都 可 以 采用 渐变 的 方法 进行 处 理 。 
如 图 18.4 所 示 页 面 通过 明暗 的 渐变 关系 ,衬托 出 一 个 变幻 而 又 充满 神秘 的 魔界 ,给 
种 紧张 而 又 神往 的 视觉 效果 。 








18.4 渐变 构图 
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18. 2.3 ”对 称 与 均衡 


对 称 是 指 以 某 一 点 为 中 心 , 其 左右 或 者 上 下 因 同 等 、 同 量 、 同 形 而 形 成 的 平衡 。 对 称 有 
以 中 轴线 为 轴 的 左右 对 称 ,以 水 平 线 为 轴 的 上 下 对 称 和 以 中 心 点 为 基准 的 放射 对 称 。 

对 称 的 版 式 设计 稳定 庄严、 整齐、 秩序 .安宁 沉静 ,如 同 中 国 古 代 宫 殿 一 样 庄重 .严肃 ， 
体现 了 一 种 古典 主义 的 风格 。 在 如 图 18. 5 所 示 的 网 页 中 ,男女 装 以 对 称 的 形式 左右 排 布 ， 
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图 18.5 对 称 构图 


均衡 是 指 版 面 以 某 一 点 为 中 心 , 左 右 或 者 上 下 等 量 不 等 形 的 配置 。 均 衡 是 一 种 造型 上 
有 变化 的 平衡 状态 ,具有 变化 的 统一 性 。 它 揭示 了 形式 内 在 的 、 含 著 的 秩序 和 平衡 ,体现 了 
造型 动 与 静 相 结合 的 动态 之 美 。 均 衡 的 形式 灵活 而 富 于 变化 ,易于 产生 现代 感 。 进 行 网 页 
界面 的 版 式 设计 时 ,根据 内 容 的 迎 辑 性 ,将 各 要 素 按 主 次 . 强 弱 关系 进行 设计 ,将 获得 视觉 一 
上 的 均衡 感 ,表现 为 呼应 关系 或 承上启下 的 关系 , 即 由 一 个 要 素 转移 至 承接 它 的 另 一 要 素 ， 
二 者 之 间 必 然 产生 呼应 关系 ,引发 观众 的 情感 效应 。 

在 如 图 18. 6 所 示 网 页 中 ,以 一 个 水 晶 球 为 中 心 点 ,通过 两 侧 色调 的 轻重 使 页 面 版 式 获 得 
心理 上 的 量 的 均衡 。 





图 18.6 均衡 构图 
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18. 2.4 节奏 与 韵律 


节奏 是 指 单 体 按照 一 定 的 条 理 、 秩 序 , 重 复 连 续 地 排列 ,形成 一 种 律动 形式 。 例 如 , 呼 
吸 , 心 跳 是 人 的 生理 节奏 ,波浪 的 前 进 、 四 季 的 交替 是 自然 界 的 节奏 ,而 图 案 的 连续 纹样 , 建 
筑 上 的 柱 窗 结构 是 设计 中 的 节奏 。 在 版 式 设计 中 也 是 如 此 ,同样 的 形态 ,同样 的 色彩 变化 ， 
同样 的 明暗 对 比 以 反复 .渐变 的 方式 出 现 ,使 人 体会 到 一 种 类 似 音乐 中 的 节奏 ,从 而 产生 美 
学 体验 。 节 奏 使 单纯 的 更 单纯 ,统一 的 更 统一 。 

韵律 是 一 种 规律 性 的 变化 , 它 是 比 节奏 更 高 一 级 的 律动 。 韵 律 是 宇宙 间 普 遍 存 在 的 一 
种 美感 形式 ,天 体 的 运行 季节 的 更 迭 、 层 夜 的 交替 、 人 体 的 运动 体现 出 一 种 韵律 ,音乐 、 诗 
歌 .舞蹈 中 更 是 包含 着 韵律 的 美 。 音 乐 是 用 时 间 的 间隔 使 声音 在 强 弱 或 高 低 变 化 中 产生 韵 
律 , 诗 歌 是 运用 诗 的 押韵 或 语言 内 在 的 声 齐 秩序 来 表达 韵律 ,舞蹈 是 靠 人 的 舞姿 在 空间 塑造 
出 变化 的 形态 来 体现 韵律 。 而 视觉 艺术 的 韵律 , 则 由 造型 元 素 的 有 规律 的 节奏 变化 形成 。 

一 般 来 说 ,节奏 感 和 韵律 感 同 时 存在 ,但 细 分 起 来 ,节奏 较 多 地 强调 “节拍 ,韵律 较 多 地 
强调 “变化 ”, 如 果 说 韵律 感 不 够 ,是 指 缺 少 变化 ,过 于 平板 ;如 果 说 节奏 感 不 强 , 是 指 变化 缺 
乏 条 理 规则 。 

运用 节奏 与 韵律 的 形式 法 则 ,能 创造 出 形象 鲜明 ,形式 独特 的 视觉 效果 ,表达 轻松 、 优 雅 
的 情感 ,使 网 页 界面 产生 不 可 思议 的 活力 与 魅力 。 如 图 18. 7 所 示 的 网 页 ,页 面 反复 通过 不 同 
的 人 体 排列 在 一 起 ,让 人 处 处 感受 到 音乐 的 轻松 节奏 。 如 图 18. 8 所 示 , 用 大 弧度 的 曲线 、 椭 
圆 形 作 轿 车 的 背景 ,使 页 面 流 畅 富 于 韵律 ,用 来 衬托 产品 的 高 贵 品 质 。 











图 18.7 节奏 构图 图 18.8 韵律 构图 


18.2.5 对 比 与 统一 


对 比 是 指 将 性 质 相 异 的 形态 要 素 直 接 或 间接 地 配置 在 一 起 , 相 异 的 特点 因 比较 而 更 加 
鲜明 ,使 人 产生 强烈 的 紧张 感 。 对 比 有 形 的 对 比 (大 小 ,方圆 , 长 短 , 曲 直 、 宽 窄 等 ), 色 的 对 比 
(色相 、 明 度 、 纯 度 、 冷 暧 ), 质 的 对 比 ( 刚 柔 、 粗 细 、 强 弱 \ 干 湿 、 轻 重 、 软 硬 、 虚 实 等 ), 势 的 对 比 
( 疾 缓 、 政 密 动静 、 抑 扬 、 进 退 等 )。 对 比 能 使 视觉 效果 更 生动 .强烈 ,感人 、 富 于 活力 ,从 而 使 
人 记忆 深刻 。 对 比 关系 越 清晰 ,视觉 效果 就 越 强烈 。 在 网 页 界面 中 ,文字 与 文字 、 图 形 与 图 
形 、 实 体 与 空白 间 处 处 都 存在 对 比 关系 。 在 一 个 页 面 中 ,通常 是 多 种 对 比 关系 同时 并 存 , 以 
产生 多 姿 多 彩 的 表现 效果 。 

如 图 18. 9 所 示 网 页 中 ,大 大 的 椅子 与 水 平 放置 的 黑色 色 块 构成 方向 上 的 对 比 ,同时 还 具 
有 色彩 纯度 .明度 .色相 的 对 比 ,使 人 获得 视觉 上 的 平衡 感 。 





图 18.9 对 比 构图 


如 果 说 ,对 比 是 将 矛盾 强化 ,强调 * 异 ?的 概念 ,那么 统一 就 是 将 矛盾 弱化 ,产生 调和 , 趋 
向 于 * 同 ”的 概念 。 统 一 是 指 性 质 相 同 或 类 似 的 形态 要 素 并 置 在 一 起 ,形成 一 种 一 致 或 趋向 
于 一 致 的 感觉 。 统 一 并 不 是 设计 形式 的 单一 化 . 它 使 多 种 多 样 变化 的 因素 具有 条 理性 和 规 
律 性 ,使 各 个 局 部 相互 联系 。 为 了 获得 版 面 的 整体 效果 ,我 们 常用 各 种 手法 来 取得 统一 ,如 
在 页 面 的 不 同位 置 运用 相同 的 字体 、 相 同 的 色调 ,出 现 相同 特征 和 形状 的 造型 因素 等 ,使 版 
面 各 处 协调 一 致 。 

如 图 18. 10 所 示 页 面 ,背景 用 色 、 线 条 均 与 照片 中 产品 的 风格 一 致 ,页 面 充满 了 和 谐 
的 美 。 
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图 18.10 统一 构图 


18.3 ”版式 视觉 原理 


人 通过 视觉 可 以 感知 外 部 世界 的 多 方面 的 信息 ,由 视觉 传达 的 信息 比 其 他 所 有 感官 所 
传递 信息 的 总 和 还 要 高 出 好 几 个 数量 级 。 因 此 ,本 节 主 要 从 视觉 生理 、 心 理 的 角度 进行 分 
析 , 以 实现 网 页 界面 的 版 式 合理 布局 、 便 于 浏览 的 功能 。 


18.3.1 视觉 突出 


在 具有 一 定 配置 的 视觉 空间 内 ,有 些 对 象 突现 出 来 形成 主体 ,有 些 对 象 退 居 到 衬托 地 位 
而 成 为 背景 。 一 般 说 来 ,主体 与 背景 的 区 分 度 越 大 ,主体 就 越 突出 ,而 成 为 我 们 视觉 感知 的 
对 象 “ 万 绿 从 中 一 点 红 ” 就 是 这 个 道理 。 反 之 ,主体 与 背景 的 区 分 度 越 小 ,就 越 难于 把 主体 
与 背景 分 开 。 要 使 主体 突出 让 视觉 容易 感知 ,不 仅 要 具备 突出 的 特点 且 要 具有 明确 的 轮廓 、 
明暗 度 和 统一 性 。 


18.3.2 整体 感 


人 具有 将 由 许多 部 分 或 多 种 属性 组 成 的 对 象 看 作 具 有 一 定 结构 的 统一 整体 的 特性 , 称 
为 视觉 的 整体 性 。 在 感知 熟悉 的 对 象 时 ,只 要 感知 到 它 的 个 别 属 性 或 主要 特征 ,就 可 以 根据 
累积 的 经 验 推断 它 的 其 他 属性 和 特征 ,从 而 整体 地 感知 它 , 例 如 , 当 一 个 熟人 从 远 处 走 来 时 ， 
我 们 从 他 的 大 致 轮廓 和 走路 姿势 就 可 以 辨认 ,而 无 须 看 清 他 的 脸 。 但 对 于 不 熟悉 的 对 象 ,我 
们 往往 倾向 于 把 它 感知 为 具有 一 定 结构 的 有 意义 的 整体 。 如 图 18. 11 所 示 , 人 的 第 一 视觉 是 
一 个 完整 的 头像 ,而 不 是 一 条 条 黑白 相间 的 线条 。 
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图 18.11 整体 感 


18. 3.3 错觉 


错觉 是 视觉 形态 受 光 、 形 、 色 等 视 知觉 要 素 的 干扰 ,在 人 的 视觉 中 所 产生 的 错误 感 , 亦 即 
主观 感受 与 客观 事实 有 所 出 入 。 这 种 视觉 现象 在 设计 领域 应 用 很 广 ,网 页 界面 设计 及 到 的 
错觉 现象 主要 有 如 下 几 类 。 


1. 构 形 错觉 


图 形 与 图 形 之 间 互 相 影响 而 产生 的 形态 变化 ,主要 体现 在 造型 要 素 的 几何 形 方 面 。 如 
图 18.12 所 示 , 由 于 透视 线 的 作用 ,同样 大 小 的 立方 体 在 靠近 集中 点 ( 灭 点 ) 时 ,看 起 来 显得 
较 大 。 








18.12 构 形 错觉 


2. 色彩 错 觉 


当 两 种 或 两 种 以 上 的 色 并 和 置 时 ,由 于 色彩 的 对 比 因素 ,人 在 视觉 上 会 产生 错觉 。 同 样 灰 
度 块 , 放 在 不 同 颜色 中 ,色相 倾向 不 同 , 如 图 18. 13 所 示 。 
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图 18.13 色彩 错觉 
通过 以 上 对 错觉 的 视觉 规律 的 把 握 ,在 网 页 版 式 设计 中 应 尽量 避免 因 错觉 所 带 来 的 不 
利 影响 。 例 如 ,为 了 减 小 同一 形象 因明 度 不 同 产 生 的 大 小 错觉 ,可 将 明度 高 的 形象 缩小 或 将 
明度 低 的 形象 扩大 。 


18.3.4 视线 移动 规律 


人 眼 的 视线 沿 水 平方 向 运动 比 沿 垂直 方向 运动 快 而 且 不 易 疲 劳 。 视 线 的 变化 习惯 于 从 
左 到 右 `, 从 上 到 下 和 顺 时 针 方 向 运动 。 当 视线 沿 既 不 水 平 ,也 不 垂直 的 斜 线 方向 移动 时 ,在 
水 平方 向 上 下 约 45 的 范围 视线 为 从 左 到 右 移 动 , 在 垂直 方向 左右 约 45 的 范围 内 ,视线 为 从 
上 到 下 移动 。 

了 解 了 这 些 视 觉 特征 ,在 进行 版 式 设计 时 会 更 加 科学 、 理 性 ,而 不 仅仅 停留 在 “感觉 ” 层 
面 ,更 多 地 为 使 用 者 考虑 ,是 网 页 界面 人 性 化 设计 的 要 求 。 

网 页 界面 的 版 式 设计 属于 视觉 设计 ,其 最 终 目的 是 要 有 效 地 传递 视觉 信息 。 这 里 涉及 
到 提高 传达 效率 的 问题 ,也 就 是 说 ,版 式 设计 应 该 能 增强 人 们 对 页 面 的 注意 ,增进 对 内 容 的 
理解 和 记忆 ,从 而 影响 人 们 的 思想 和 行为 。 因 此 ,必须 依据 人 的 视觉 生理 ,心理 特征 ,采取 相 
应 的 手段 ,让 版 式 设计 发 挥 出 更 大 的 功效 ,达成 最 佳 的 诉求 效果 。 因 此 网 页 的 版 式 设计 一 定 
要 符合 人 的 视觉 习惯 ,满足 人 的 视觉 生理 需求 。 


18.4 版式 构成 类 型 


不 同 的 版 式 就 会 有 不 同 的 视觉 效果 ,根据 视觉 效果 不 同 可 以 总 结 出 以 下 版 式 构成 的 类 
型 :水 平分 割 .垂直 分 割 , 水 平一 垂直 交叉 分 割 .中 轴 型 、 倾 斜 型 .曲线 型 .重心 型 .反复 型 、 散 
点 型 等 等 。 其 中 ,水 平分 割 、 垂 直 分 割 ,水 平一 垂直 交叉 分 割 常 用 到 水 平 线 、 垂 直线 、 和 矩形 等 ， 
这 些 形式 在 网 页 制作 时 容易 实现 , 且 页 面 能 容纳 较 多 的 信息 含量 ,因而 是 网 页 界面 中 使 用 相 


18. 4.1 水 平分 割 

页 面 中 的 水 平分 割 与 排列 ,强调 了 水 平 线 的 作用 ,使 页 面具 有 安定 .平静 的 感觉 ,观众 的 
视线 在 左右 移动 中 捕捉 视觉 信息 ,符合 人 们 的 视觉 习惯 。 

1. 水 平均 匀 分 割 


水 平均 匀 分 割 将 页 面 分 割 成 上 下 相等 的 两 部 分 。 如 图 18. 14 所 示 , 上 半 部 用 作 视 觉 表 
现 ,引发 情感 ,下 半 部 用 来 解释 说 明 , 上 半 部 多 为 主体 形象 。 





图 18.14 水 平均 匀 分 割 


2. 水 平 不 均匀 分 割 


水 平 不 均匀 分 割 是 将 页 面 分 割 成 上 下 不 相等 的 两 部 分 。 一 般 来 说 ,如 果 在 上 半 部 安置 
标题 或 导航 , 则 面积 较 小 ;如 果 在 上 半 部 安置 图 片 或 主体 形象 , 则 面积 适当 加 大 ,如 图 18. 15 
所 示 。 


Saassy 








图 18.15 水 平 不 均匀 分 割 
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3. 水平 多 次 分 割 


水 平 多 次 分 割 是 页 面 沿 水 平分 割 成 大 小 不 等 的 几 个 部 分 。 如 图 18. 16 所 示 ,横向 排列 的 
图 片 和 标题 文字 ,强调 了 水 平分 割 的 层次 和 精确 感 。 多 层 分 割 有 助 于 不 同 信息 的 归 类 。 
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图 18.16 水 平 多 次 分 割 


4. 水 平 变化 分 割 


水 平 变化 分 别 是 在 水 平分 割 的 基础 上 进行 变化 。 如 图 18. 17 所 示 ,水 平分 割 与 斜 线 相 结 
合 , 打 破 了 页 面 的 安定 ,产生 动感 。 





图 18.17 水 平 变化 分 割 
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18.4.2 垂直 分 割 


页 面 中 的 垂直 分 割 与 排列 , 则 强调 垂直 线 的 作用 ,具有 坚硬 、 理 智 .冷静 和 秩序 的 感觉 。 

1. 垂直 均匀 分 割 

垂直 均匀 分 割 是 把 页 面 分 割 为 左右 相等 的 两 部 分 。 在 视觉 习惯 上 , 当 左 右 两 部 分 形成 
强 弱 对 比 时 ,会 造成 视觉 心理 的 不 平衡 。 这 时 ,可 将 分 割 线 作 部 分 或 全 部 的 弱化 处 理 ,或 在 
分 割 处 加 入 其 他 元 素 ,使 左右 部 分 的 过 渡 自 然而 和 谐 。 如 图 18. 18 所 示 ,左右 两 部 分 在 色彩 
上 的 对 比 由 于 视觉 中 心 的 图 文 而 减弱 ,左上 角 的 标志 减轻 左 半 部 的 重量 感 ,使 页 面 更 为 融合 。 





图 18.18 垂直 均匀 分 割 


2. 垂直 不 均匀 分 割 


垂直 不 均匀 分 割 是 把 页 面 分 割 为 左右 不 相等 的 两 部 分 。 左 边 的 视觉 注意 度 较 高 ,因而 
放置 标志 、 导 航 信 息 .主体 形象 等 ,如 图 18. 19 所 示 。 如 果 将 主体 形象 放 在 左右 分 割 处 , 则 会 
减弱 左右 部 分 的 对 比 , 加 强 它们 的 联系 ,成 为 该 页 面 的 视觉 中 心 。 
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图 18.19 垂直 不 均匀 分 割 
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3. 垂直 多 次 分 割 


垂直 多 次 分 割 是 页 面 沿 垂直 方向 分 割 成 大 小 不 等 的 几 部 分 。 在 如 图 18. 20 所 示 的 图 中 ， 
页 面具 有 很 强 的 层次 性 ,左边 为 主 栏目 导航 ,右边 为 次 级 栏目 导航 ,中 间 为 相应 的 内 容 , 中 间 
和 右边 由 色彩 统一 ,而 左边 用 形态 的 渗入 来 加 强 它 与 中 间 部 分 的 衔接 。 





m 图 18.20 垂直 多 次 分 割 


4. 垂直 变化 分 割 


垂直 变化 分 割 是 将 垂直 分 制 进行 特异 性 处 理 ,容易 取得 耳目 一 新 的 效果 。 如 图 18. 21 所 
示 , 将 垂直 分 割 应 用 于 网 页 设计 ,在 分 割 处 粘贴 一 个 典型 提示 图 案 。 分 割 的 手法 灵活 多 变 ， 
目的 就 是 营造 出 和 谐 统一 的 美感 。 
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图 18.21 垂直 变化 分 割 


18. 4.3 水 平一 垂直 分 割 


水 平一 垂直 分 割 是 将 水 平 与 垂直 分 割 同时 使 用 ,它们 之 间 容 易 形 成 对 比 关系 , 较 之 单 向 
分 割 更 为 丰富 、 实 用 而 灵活 多 变 。 下 面 举例 说 明 。 

如 图 18. 22 所 示 , 采 用 典型 的 “ 门 ”型 构图 ,艳丽 的 嫩绿 色 和 上 略 带 变化 的 分 割 方式 ,打破 了 
构成 方式 的 呆板 ,使 页 面 更 具 个 性 化 和 青春 气息 。 





图 18. 22 “ 门 "型 构图 


如 图 18. 23 所 示 , 采 用 “ 匡 ” 型 构图 ,顶部 为 主 栏目 导航 , 左 侧 为 次 级 栏目 导航 ,由 于 两 个 
页 面色 调 的 冷暖 不 同 , 给 人 以 不 同 的 视觉 心理 感受 。 
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图 18. 23 “ 匡 ” 型 构图 


如 图 18. 24 所 示 的 网 站 页 面 ,在 左右 分 割 的 版 面 中 ,以 贯穿 的 水 平 路 面 来 连接 左右 ,标志 
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52 二 主 栏目 菜单 得 以 强化 而 突出 ,同时 ,人 物 形象 打破 了 分 割 界线 ,人 物 目光 对 浏览 者 的 视线 


进行 诱导 ,这 些 都 减弱 了 左右 对 比 ,加 强 了 联系 ,显示 出 运动 性 网 站 的 力量 感 。 








18.24 ”运动 构图 


如 图 18. 25 所 示 ,一 改 常 规 的 版 式 构图 ,将 主 栏目 菜单 置 于 页 面 右 侧 , 左 边 为 主体 产品 形 
象 , 明 暗色 的 对 比 加 强 了 版 式 特征 ,此 独到 之 处 十 分 吸引 人 。 





图 18.25 逆向 构图 
至 于 其 他 几 种 版 式 构成 的 类 型 ,与 前 面 介绍 的 视觉 流程 类 型 几乎 完全 相同 ,这 里 不 再 重 
复 。 网 页 界面 的 版 式 设计 实际 上 没有 固定 的 格式 可 循 ,在 实际 的 设计 实务 中 ,我 们 还 应 根据 
网 页 界面 的 内 容 和 要 求 , 勇 于 突破 传统 和 形式 框架 的 束缚 ,突破 创新 。 
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9 
-年 L 本 章 内 容 包括 


全 了 解 CI 设计 系统 
全 LOGO 设计 技巧 
全 LOGO 实例 制作 
和 全 Banner 设计 技巧 


全 Banner 实例 制作 


本 章 要 点 : 


克 设 计 (Visual Indentity System, 直译 为 视觉 识别 系统 ) 是 企业 识别 系统 中 最 能 展示 企业 个 性 
的 一 项 内 容 。W 不 仅 可 以 充分 展示 企业 精神 风貌 ,而 且 为 企业 成 为 国际 知名 公司 提供 了 形 
象 保证 ,从 而 为 推动 企业 发 展 打 下 坚实 的 基础 

WI 设计 实际 应 用 体系 则 包括 标志 系统 ,广告 系统 和 印刷 用 清 样 等 部 分 。WI 基 本 体系 中 
的 标志 、 文 字 和 色 面 的 标准 化 和 体系 化 ,是 整个 由 设计 的 核 ， 他 一 切 设 计 和 应 用 
部 分 的 延伸 工作 都 是 围绕 这 个 核心 展开 的 。 这 种 核心 理念 贯穿 于 文字 设计 、 图 形 设计 和 现场 
应 用 的 全 过 程 。 本 章 将 重点 介绍 标志 COGO)i 设 计 基 本 方法 和 广告 Bamneb 设 计 基 础 。 












新 编 网 页 制作 入 门 与 提高 





19.1 CI 设计 系统 


CI 是 Corporate Identity 的 缩写 ,意思 是 通过 视觉 来 统一 企业 的 形象 。 现 实生 活 中 的 CI 
成 功 策划 比比 皆 是 ,例如 可 口 可 乐 公 司 全 球 统一 的 标志 、 色 彩 和 产品 包装 ,都 给 我 们 留 下 了 
极为 深刻 的 印象 。 

一 个 杰出 的 网 站 ,和 公司 CI 一样 ,也 需要 整体 的 形象 包装 和 设计 。 准 确 的 有 创意 的 CI 
设计 ,对 网 站 的 宣传 推广 有 事半功倍 的 效果 。 当 网 站 主题 和 名 称 定 下 来 之 后 ,需要 思考 的 就 
是 网 站 的 CI 形象 。 

CI 系统 一 般 由 三 部 分 组 成 :企业 理念 识别 (Mind Identity,MI) ,企业 行为 识别 (Behavior 
Identity,BI) 和 视觉 识别 (Visual Identity,VD) 。 

为 宣传 企业 形象 ,要 充分 利用 各 种 媒介 物 或 者 以 独立 形式 展开 强大 的 攻势 ,把 企业 形象 
的 视觉 形式 广泛 地 运用 到 各 种 场合 。 一 般 应 用 在 下 面 场 合 。 

e@ 公司 证 件 类 :用 于 识别 公司 员工 ,如 徽章 工作证、 名片 .旗帜 等 。 
文具 类 :公司 专用 信封 、 信 签 . 各 种 表格 ,文件 袋 . 笔 记 本 等 。 
符号 类 :公司 招牌 .建筑 物 外 观 . 霓 虹 灯 大 门 、 和 人口 标示 等 。 
广告 类 :各 种 报纸 .杂志 ,宣传 卡 . 招 贴 .年 历 .广播 .电视 .POP 广告 等 。 
商品 包装 类 :各 种 纸 盒 .纸袋 ,购物 包皮 箱 、 容 器 包装 .包装 纸 等 。 
交通 用 具 类 :各 种 业务 用 车 、 运 货车 等 企业 的 各 种 车 辆 , 均 印 上 公司 的 标志 和 公司 的 
名 称 或 商品 名 称 , 作 为 活动 广告 。 

@ 服装 类 :男女 制服 、 工 作 服 、 臂 章 、 钢 盔 、 工 作 帽 领带、 手帕 等 。 

e@ 其他: 橱 台 、 家 具 、 和 餐具、 烟灰 人生 、. 壁 饰 等 。 

企业 形象 的 运用 有 着 严格 的 规定 ,标志 、 标 准 色 和 标准 字体 不 能 因为 应 用 的 条 件 不 同 而 
随意 变化 。 但 为 适应 各 种 用 途 和 形式 上 的 变化 .可 以 在 原 有 的 基础 上 进行 造型 .色彩 和 组 合 
上 的 变化 ,这 种 变化 一 般 在 设计 中 要 预先 考虑 好 。 如 用 于 商店 门 头 ,还 是 用 于 招牌 ;是 采用 
在 招贴 上 ,还 是 作为 汽车 上 的 活动 广告 等 。 

设计 要 认真 ,要 充分 估计 各 种 可 能 的 变化 ,并 将 各 种 方案 编 成 设计 手册 以 便 指导 实施 。 
例如 ,日 本 美 乐 达 公 司 的 标志 因为 缩小 使 用 会 影响 其 中 5 条 线 的 视觉 效果 ,于 是 设计 者 便 将 
线 的 粗细 ,线条 数量 加 以 修正 ,以 适应 于 各 种 场合 。 另 外 各 企业 的 标志 和 标准 字体 ,企业 标 
语 , 色 条 的 横向 组 合 、 纵 向 组 合 , 色 条 长 短 等 ,都 要 作出 规定 ,防止 造成 混乱 现象 ,影响 统一 的 
企业 形象 。 

在 网 站 建设 中 ,用 户 应 处 理 好 下 面 几 个 问题 。 


1. 设计 网 站 的 标志 (LOGO) 
首先 需要 设计 制作 一 个 网 站 的 标志 (LOGO) 。 就 如 同 商标 一 样 .LOGO 是 一 个 站 点 特色 


和 内 涵 的 集中 体现 ,看 见 LOGO 就 让 大 家 联想 起 你 的 站 点 。 
2. 设 计 网 站 的 标准 色彩 


网 站 给 人 的 第 一 印象 来 自视 觉 冲击 ,确定 网 站 的 标准 色彩 是 相当 重要 的 一 步 。 不 同 的 
色彩 搭配 产生 不 同 的 效果 ,并 可 能 影响 到 访问 者 的 情绪 。 

标准 色彩 是 指 能 体现 网 站 形象 和 延伸 内 涵 的 色彩 。 如 IBM 的 深蓝 色 , KFC 的 红色 条 
型 , Windows 视窗 标志 上 的 红 蓝 黄 绿色 块 ,都 使 我 们 觉得 很 贴切 ,很 和 谐 。 一 般 来 说 ,一 个 网 
站 的 标准 色彩 不 超过 3 种 , 太 多 则 让 人 眼花 综 乱 。 

适合 于 网 页 标准 色 的 颜色 有 : 蓝 色 , 黄 /橙色 , 黑 / 灰 /白色 三 大 系列 色 。 

3. 设计 网 站 的 标准 字体 

和 标准 色彩 一 样 ,标准 字体 是 指 用 于 标志 、 标 题 和 主 菜 单 的 特有 字体 。 一 般 网 页 默认 的 
字体 是 宋体 。 为 了 体现 站 点 的 与 众 不 同和 特有 风格 ,可 以 根据 需要 选择 一 些 特别 字体 。 例 
如 ,为 了 体现 专业 可 以 使 用 粗 仿宋 体 ,体现 设计 精美 可 以 用 广告 体 , 体 现 亲切 随意 可 以 用 手 
写 体 等 。 用 户 也 可 以 根据 自己 网 站 所 表达 的 内 涵 , 选 择 更 贴切 的 字体 。 目 前 常见 的 中 文字 
体 有 二 三 十 种 ,常见 的 英文 字体 有 近 百 种 ,网 络 上 还 有 许多 专用 英文 艺术 字体 下 载 ,要 寻找 
一 款 满意 的 字体 并 不 困难 。 当 使 用 非 默认 字体 建议 用 图 片 的 形式 ,因为 很 可 能 浏览 者 的 计 
算 机 里 没有 安装 特别 的 字体 。 


4. 设计 网 站 的 宣传 标语 


网 站 的 宣传 标语 可 以 说 是 网 站 的 精神 ,是 网 站 的 目标 。 例 如 , 稚 巢 的 “味道 好 极 了 ”; 麦 
斯 威 尔 的 “好 东西 和 好 朋友 一 起 分 享 ”; Intel 的 “给 你 一 颗 奔腾 的 芯 ”。 

总 之 ,标志 、 色 彩 、 字 体 和 标语 是 一 个 网 站 CI 形象 的 关键 ,设计 时 应 从 这 几 个 方面 进行 
把 握 。 


19.2 LOGO 设计 


LOGO 一 词 在 英文 中 的 意思 为 商标 或 公司 名 称 的 图 案 字 和 标识 语 。 在 网 页 设计 中 ,LO- 
GO 常常 作为 网 站 的 标志 出 现 , 起 着 非常 重要 的 作用 ,一 个 制作 成 功 的 LOGO, 不 仅 可 以 很 好 
地 树立 网 站 形象 ,还 可 以 传达 网 站 的 相关 信息 。 另 外 ,LOGO 作为 首先 印 人 访问 者 眼帘 的 具 
体形 象 ,所 以 更 增加 了 其 重要 性 。 


19.2.1 网 站 LOGO 


网 站 LOGO 的 设计 重 在 表达 一 定 的 形象 与 信息 ,使 访问 者 通过 LOGO 就 可 以 对 网 站 有 
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”初步 的 了 解 , 接 着 进一步 去 了 解 相关 的 其 他 信息 。 网 站 LOGO 的 设计 , 跟 传统 设计 有 着 很 多 
的 相通 性 ,但 由 于 网 络 本 身 的 限制 以 及 浏览 习惯 的 不 同 , 它 还 带 有 许多 与 之 相 异 的 特点 。 如 
网 站 LOGO 一 般 要 求 简单 醒目 ,除了 表达 出 一 定 的 形象 与 信息 外 ,还 得 兼顾 美观 与 协调 。 实 
际 制 作 之 中 ,很 多 靠 的 是 灵感 和 仿效 ,而 更 多 的 时 候 是 通过 繁琐 的 工作 与 多 次 的 尝试 完成 的 。 





1.LOGO 定义 


LOGO 是 表明 特征 的 符号 ,主要 由 企业 品牌 的 标准 名 称 、 标 准 图 形 ( 字 体 图 形 和 形象 图 
形 ) ,标准 色彩 ,按照 标准 规范 组 合 构 成 。 

企业 识别 标志 从 语义 指向 印象 感 染 、 色 彩 冲 击 及 其 组 合 协同 方式 四 个 方面 ,表现 和 展 
示 企 业 生产 经 营 独特 的 发 展 战略 和 行为 方式 、 开 发 和 创造 独特 的 产品 品牌 、 塑 造 和 传播 良好 


2. LOGO 的 职能 


作为 独特 的 传媒 符号 ,标识 (LOGO) 一 直 是 传播 特殊 信息 的 视觉 文化 语言 。 现 代 洗 练 的 
抽象 纹样 简单 字 标 等 都 是 在 实现 着 标识 被 标识 体 的 目的 , 即 通 过 对 标识 的 识别 .区 别 、 引 发 
联想 ,增强 记忆 ,促进 被 标识 体 与 其 对 象 的 沟通 与 交流 ,从 而 树立 并 保持 对 被 标识 体 的 认 知 、 
认同 ,达到 提高 认 知 度 、 美 誉 度 的 效果 。 

具有 传媒 特性 的 LOGO, 为 了 在 最 有 效 的 空间 内 实现 所 有 的 视觉 识别 功能 ,一 般 是 通过 
特 示 图 案 及 特 示 文字 的 组 合 , 达 到 对 被 标识 体 的 出 示 、 说 明 沟通 、 交 流 从 而 引导 观众 的 兴 
趣 , 达 到 增强 美誉 .记忆 等 目的 。 

如 图 19. 1(a) 所 示 ,天 极 网 的 LOGO 通过 一 个 抽象 的 人 顽强 攀 越 极地 给 人 一 种 强烈 的 力 
量 感 ,同时 也 传达 了 天 极 人 的 精神 风貌 ;如 图 19. 1(b) 所 示 ,263 在 线 通 过 对 “@” 符 号 的 造型 
来 阐释 自己 网 站 的 内 涵 , 即 网 络 的 快捷 和 在 线 服 务 ; 如 图 19.1(c) 所 示 , 新 浪 网 通过 对 字母 “i” 
的 艺术 化 夸张 和 拟人 造型 ,给 人 留 下 深刻 印象 。 
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图 19.1 LOGO 标识 的 作用 


一 个 LOGO 在 网 站 中 的 作用 主要 体现 在 以 下 几 个 方面 。 

e 树立 形象 :一 个 网 站 的 LOGO 可 以 说 就 是 这 个 网 站 的 形象 , 它 代 表 网 站 的 整体 风格 ， 
特别 是 对 于 企业 网 站 来 说 ,LOGO 就 是 一 个 品牌 的 形象 ,所 以 LOGO 对 树立 一 个 网 
站 的 形象 起 着 至 关 重 要 的 作用 。 


e@ 传递 信息 :一 个 网 站 的 信息 , 绝 大 多 数 都 需要 通过 LOGO 来 传递 。 如 常见 的 网 站 链 
接 ,一 个 网 站 被 链接 到 另 一 个 网 站 传递 ,此 时 这 个 网 站 的 信息 都 需要 通过 被 链接 的 
LOGO 来 达到 证 访问 者 了 解 的 目的 。 

e 品牌 拓展 :在 网 络 中 ,LOGO 就 是 一 个 网 站 形象 的 代表 ,一 切 主题 活动 都 要 围绕 这 个 
形象 来 进行 ,如 在 设计 制作 一 些 宣传 页 面 时 ,都 要 将 LOGO 放置 到 显著 的 位 置 。 另 
外 ,LOGO 也 是 网 络 广告 中 不 可 缺少 的 构成 要 素 。 


19. 2.2 LOGO 的 设计 原则 

LOGO 的 设计 需要 从 很 多 方面 来 分 析 , 它 涉及 到 图 形 .文字 .颜色 .排版 等 各 个 方面 的 内 
容 , 设 计 LOGO 通常 从 以 下 几 个 方面 考虑 。 

1. 构成 


一 个 LOGO 的 构成 要 素 ,一 般 由 网 站 的 英文 名 称 、 网 站 的 网 址 、 网 站 的 标志 图 形 、 网 站 的 
主题 描述 构成 ， Ane 它 还 会 包括 网 站 的 中 文 名 称 。 但 是 这 几 个 构成 
要 素 并 不 一 定 同时 存在 ,而 是 适当 地 组 合 在 一 起 。 如 图 19. 2 所 示 的 LOGO 就 是 由 网 站 的 英 
文 名 称 和 网 站 的 标志 ae 








网 站 的 标志 图 形 





网 站 的 英文 名 称 
图 19.2 英文 LOGO 


对 于 中 文 网 站 来 说 ,LOGO 中 还 会 包括 网 站 中 文 名 称 , 如 图 19. 3 所 示 赛 迪 网 的 LOGO 
标识 。 


网 站 的 标志 sm 必 》 突 过 网 赛 迪 网 一 网 站 的 中 文 名 称 


网 站 的 英文 名 称 一 一 CCID www.ccidnet.com 
网 站 的 网 址 一 | 


图 19.3 中 文 LOGO 


第 
eS 
章 
网 
站 
< 
设 
计 











新 编 网 页 制作 入 门 与 提高 





2. 形体 


对 于 一 些 企业 网 站 ,它们 的 LOGO 一 般 都 是 由 企业 品牌 标识 和 英文 名 称 组 成 ,并 不 对 网 
站 的 LOGO 进行 特别 地 设计 ,如 图 19. 4 所 示 的 Adobe 公司 的 LOGO, 就 是 由 企业 品牌 标识 
和 英文 名 称 组 成 。 


A 网 站 的 标志 图 形 


Adobe 一 网 站 英文 名 称 
图 19.4 Adobe 公司 的 LOGO 

除了 上 面 的 情况 外 ,开始 进行 LOGO 设计 时 通常 都 会 有 一 些 真实 形体 作 参 考 , 例 如 ,以 
农业 为 主 的 网 站 可 能 会 在 网 站 的 LOGO 中 放置 农作物 形体 ,以 书籍 为 主 的 网 站 会 在 网 站 的 
LOGO 中 放置 书本 形体 等 。 但 在 创作 过 程 中 很 少 有 直截了当 进行 放置 的 ,艺术 创作 常常 将 
自然 形体 与 设计 结合 在 一 块 ,网 站 LOGO 创作 则 往往 通过 技术 提取 与 朴素 制作 来 完成 。 技 
术 提 取 使 实际 形体 与 网 站 内 容 相 结合 , 用 会 意 体现 内 容 , 用 轮廓 体现 形体 。 而 朴素 制作 则 是 
气 弃 不 相关 的 元 素 信 息 , 力 图 用 最 简单 的 方式 表达 最 丰富 的 内 涵 。 例 如 ,114 中 资源 的 
LOGO 抽 象形 体 使 人 联想 到 网 络 字 符 @ 和 信息 查询 ,如 图 19.5(a) 所 示 ; 广 州 视窗 通过 简练 
的 窗口 使 人 联想 到 广州 是 中 国 改革 开放 的 窗口 .如 图 19. 5(b) 所 示 。 


中 资源 请 肛 视窗 


14 .com,cn gznet.com 
(b) 








图 19.5 LOGO 形体 变化 


3. 颜色 


在 网 站 LOGO 的 颜色 选择 中 应 尽量 少 用 颜色 。 一 方面 减 小 图 像 尺寸 , 另 一 方面 避免 给 
人 过 于 花哨 的 感觉 。 另 外 在 颜色 的 选择 中 ,要 与 网 站 的 整体 相关 联 。 如 微软 公司 网 站 的 
LOGO, 以 蓝 色 和 白色 搭配 为 主 ,符合 微软 公司 的 形象 颜色 ,如 图 19.6 所 示 。 


图 19.6 微软 公司 的 LOGO 
标准 色彩 是 标志 不 可 缺少 的 主要 构成 因素 ,以 光 色 效应 表现 企业 及 其 产品 ,一 般 包 括 了 





专用 品牌 标准 字体 图 形 的 标准 色彩 和 标准 形象 图 形 的 标准 色彩 

网 站 给 人 的 第 一 印象 来 自视 觉 冲 击 ， 确定 网 站 的 标准 色彩 是 相当 重要 的 一 步 。 不 同 的 
色彩 搭配 产生 不 同 的 效果 ,并 可 能 影响 到 访问 者 的 情绪 。 标 准 色彩 是 指 同 LOGO 颜色 相 匹 
配 , 能 体现 网 站 形象 和 延伸 内 涵 的 色彩 。 

一 般 来 说 ,网 站 的 标准 色彩 不 超过 3 种 , 太 多 则 让 人 眼花 练 乱 。 标 准 色 彩 要 用 于 网 站 的 
标志 ,标题 、 主 菜单 和 主 色 块 ,给 人 以 整体 统一 的 感觉 。 至 于 其 他 色彩 也 可 以 使 用 ,只 是 作为 
点 级 和 衬托 ,不 能 喧 宾 夺 主 。 例 如 ,263 网 络 集团 以 红色 为 彰 景 ,衬托 自 色 字体 ,比较 醒目 ;中 
央 电 视 台 以 蓝 色 系 渐变 为 背景 ,衬托 红 、 白 色 文字 ,和 电视 屏幕 相符 合 ;Sun 公司 以 蓝 紫 色 为 
背景 ,衬托 白色 文字 ,符合 企业 文化 ;IBM 以 深蓝 色 为 背景 ,衬托 白色 文字 ,显示 该 公司 的 厚 
重 , 如 图 19.7 所 示 。 


(@ 2638%#gl Sun 








图 19.7 LOGO 的 色彩 


色彩 组 合 具 有 物理 .生理 、 心 理 、 认 知 、 审 美 五 大 效应 ,不 仅 凝聚 和 积淀 了 民族 文化 传统 
的 情感 倾向 和 理性 意味 ,而 且 引发 和 激励 人 们 的 情感 性 接受 和 逻辑 辨识 认定 。 
色彩 与 文字 和 图 形 同 频 共振 ,丰富 了 文字 和 图 形 的 形象 感 和 氛围 感 ,获得 了 文字 和 图 形 
所 赋予 的 时 代 精 神 及 其 情感 倾向 和 理性 意味 。 另 一 方面 ,色彩 与 人 们 心理 思维、 审美 需要 
共 频 共振 ,感染 力 将 超越 既定 的 文字 和 图 形 , 潜 移 默 化 地 把 人 们 导入 情景 交融 的 审美 意境 。 
正 因为 如 此 ,在 文字 、 图 形 .色彩 中 ,色彩 传播 被 人 感知 ,辨识 .区 别 是 最 为 迅速 和 准确 的 。 
设计 专用 品牌 标准 色彩 必须 注意 : 
e 在 标志 标准 名 称 、 标 准 图 形 、 标 准 色彩 三 大 构成 要 素 中 ,首先 突出 标准 色彩 及 其 
组 合 。 
® ”充分 发 挥 色彩 之 间 多 重 的 鲜明 对 比 和 强烈 反差 作用 .加 快 信息 传播 速度 ,加 大 信息 
传播 力度 。 
e ”深层 次 开发 和 运用 标准 色彩 组 合 的 情感 倾向 和 理性 意味 ,强化 企业 识别 标志 ,企业 
识别 系统 的 吸引 力 和 传播 力 , 而 且 极 大 地 促进 企业 对 自身 独特 发 展 战略 、 运 行 实 态 
的 约束 力 和 激励 力 。 
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4. 字 体 


在 网 站 LOGO 设计 中 ,文字 是 设计 中 非常 重要 的 一 环 ,很 多 要 传递 的 信息 都 是 通过 文字 
来 表达 的 。 

首先 文字 的 字体 选择 ,对 于 一 种 字体 ,不 仅 要 了 解 其 历史 ,还 得 弄 清楚 它 的 应 用 场合 。 
哪 一 种 字体 具有 古典 风范 , 哪 一 种 字体 比较 新 颖 , 哪 一 种 字体 在 这 种 场合 中 更 便于 阅读 ,都 
是 在 设计 中 应 该 考虑 到 的 。 字 体 的 选择 起 着 相当 重要 的 作用 ,但 选择 的 标准 却 是 没有 定式 
的 ,对 于 一 个 LOGO, 永 远 不 知道 到 底 哪 种 字体 才 是 最 贴切 的 ,只 有 不 断 地 尝试 ,才能 找到 让 
大 家 满意 的 字体 。 

如 图 19. 8 所 示 的 字体 风格 各 自 不 同 , 上 海 热线 是 行书 字体 ,爽快 ; 风 凰 网 ( 风 凰 卫视 ) 字 
体 是 隶书 ,就 具有 古典 的 风范 ,也 符合 网 站 的 主题 ;人 民 网 (人 民 日 报 ) 字 体 模仿 毛泽东 手书 ， 
和 人 民 日 报 标题 风格 保持 一 致 


At 人 OR :人 Ke 


rich.online.sh.cn www.people.com.cn 
图 19.8 LOGO 的 字体 





另外 关于 字体 大 小 写 的 问题 。 一 般 地 ,无 论 是 字体 还 是 图 像 都 得 保持 风格 的 一 致 性 , 因 
此 在 字体 大 小 写 的 选择 上 也 要 遵循 下 面 原则 : 

e 选择 大 写 给 人 以 整齐 的 感觉 。 

e 选择 小 写 主要 使 用 其 起 伏 性 。 

@ 另外 在 大 小 写 混用 时 ,因为 大 小 写 的 字体 ,无 论 是 宽度 还 是 高 度 ,以 及 整个 字体 风格 

都 会 有 区 别 ,所 以 一 定 要 注意 整齐 性 。 

文字 的 抽象 在 网 站 LOGO 的 制作 中 十 分 重要 ,对 文字 进行 适当 地 抽象 处 理 , 可 以 使 
LOGO 看 起 来 更 加 人 性 化 。 例 如 ,我 们 熟悉 的 太平 洋 电脑 网 ,将 “PConline” 中 的 字母 “o" 抽 象 
成 一 个 地 球 , 和 背景 中 的 圆 形 地 球 相 呼 应 ,如 图 19. 9 所 示 。 


A 


PCenline。- 
太平 洋 电脑 网 


图 19.9 LOGO 的 字体 抽象 


LOGO 合成 字体 是 一 种 表象 .表意 的 综合 , 指 文字 与 图 案 结合 的 设计 , 兼 具 文字 与 图 案 
的 属性 ,但 都 导致 相关 属性 的 影响 力 相 对 弱化 ,为 了 不 同 的 设计 取向 ,制作 偏 图 案 或 偏 文字 
的 LOGO, 会 在 表达 时 产生 较 大 的 差异 。 有 两 种 情况 :只 对 印刷 字体 作 简 单 修饰 ,或 把 文字 
变 成 一 种 装饰 造型 让 大 家 去 猜 。 例 如 ,百度 中 的 “du 进行 图 形 艺术 化 ;QQ 网 中 “QQ” 用 两 个 





可 爱 的 卡通 图 形 代替 ,如 图 19. 10 所 示 。 





Ba Sa 


图 19.10 LOGO 的 字体 合成 


完整 的 LOGO 设计 ,尤其 是 有 中 国 特色 的 LOGO 设计 ,在 国际 化 的 要 求 下 ,一 般 都 应 考 
虑 至 少 有 中 英文 双语 的 形式 ,要 考虑 中 英文 字 的 比例 搭配, 一般 要 有 图 案 中 文 、. 图 案 英 文 、 
图 案 中 英文 及 单独 的 图 案 、 中 文 、 英 文 的 组 合 形式 。 有 的 还 要 依据 实际 用 途 考虑 繁体 、 其 他 
特定 语言 版 本 等 。 

5. 图 案 

LOGO 特 示 图 案 属 于 表象 符号 ,独特 .醒目 ;图 案 本 身 易 被 区 分 .记忆 ;通过 隐喻 .联想 、 
概括 .抽象 等 绘画 表现 方法 表现 被 标识 体 , 对 其 理念 的 表达 概括 而 形象 。 

如 果 与 被 标识 体 关联 性 不 够 直接 ,观众 容易 记忆 图 案 本 身 而 模糊 徽标 含义 。 认 知 需要 
相对 较 曲折 的 过 程 ,但 一 旦 建立 联系 ,就 会 对 被 标识 体 的 记忆 相对 持久 。 所 以 对 持久 记忆 要 
求 高 时 应 设计 良好 的 特 示 图 案 形 象 , 如 图 19. 11 所 示 ,下 面 这 些 LOGO 都 是 一 些 大 家 较 熟 悉 
的 标志 ,由 文字 会 联想 到 它 的 图 案 ;或 由 图 案 联想 到 文字 。 


Ce9 


WWW.OLYMPIC.ORG 


Tsinghua University 


(@) 下 自称 右 转 中 国 工商 银行 





“NOUSTRIAL AND COMMERCIAL BANK OF CYA 


BANK OF CHINA 
图 19.11 LOGO 的 图 案 


另外 ,如 果 希 望 在 较 短期 限 内 建立 形象 的 ,还 应 该 设计 相应 的 吉祥 物 ,以 便 公司 形象 让 
用 户 耳 熟 能 详 、 藉 以 强化 沟通 和 理解 。 
6. 版 式 


其 实 LOGO 的 版 式 设计 并 没有 定式 ,因为 它 的 设计 前 提 都 是 在 尽 可 能 简单 的 情况 下 表 
达 出 其 所 代表 的 形象 和 要 传递 的 信息 。 下 面 介 绍 几 个 典型 的 LOGO。 如 图 19. 12 所 示 的 


第 
Ee 
章 
网 
站 
< 
计 








427 





LOGO 采 用 左 侧 图 标 右 侧 文字 的 版 式 , 这 个 版 式 是 最 常用 也 是 最 容易 接受 的 版 式 。 


申 国 少儿 美术 教育 网 
A Www,ccartedu,com 
图 19.12 文字 放 在 右边 
与 之 相反 ,有 的 网 站 LOGO 在 设计 时 ,将 图 标 放 置 在 右 侧 , 如 图 19.13 所 示 的 网 
站 LOGO。 


ERICSSON 二 


图 19.13 文字 放 在 左边 


另外 ,有 的 LOGO 采用 上 下 放置 的 版 式 , 将 图 标 放 置 在 上 面 ,将 文字 放置 在 下 面 , 如 
图 19. 14 所 示 的 网 站 LOGO。 





"a FD 

MICROSOFT. 
WINDOWS NL. 
图 19.14 文字 放 在 下 边 


LOGO 版 式 完全 由 用 户 根据 具体 情况 来 设置 ,下 面 列 出 一 些 不 同 板式 的 图 标 ,如 


图 19. 15 所 示 。 
FAVA [a 
TE ‘oa M2 Co 
= 
文字 居中 文字 倾斜 文字 融合 文字 变形 
Be Se “和 
文字 缩小 文字 居中 文字 变形 文字 圆 形 
图 19.15 文字 不 同 放置 
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19.2.3 LOGO 的 设计 技巧 


设计 LOGO 应 该 遵循 访问 者 的 认识 规律 ,突出 主题 . 引 人 注 目 。 按 照 从 上 到 下 、 从 左 到 
右 、 从 小 到 大 、 从 远 到 近 的 视觉 习惯 以 及 思维 习惯 ,审美 能 力 和 审美 心理 等 要 求 ,力争 使 LO- 
GO 做 到 主题 突出 , 引 人 注 目 。 在 实际 的 设计 制作 中 ,一 般 通 过 以 下 几 个 方面 来 把 握 : 

e 在 版 式 设计 上 ,要 保持 视觉 平衡 .讲究 线条 的 流畅 ,使 得 整体 形状 美观 大 方 。 
通过 运用 反差 .对比 或 边框 等 ,使 要 表达 的 主题 得 到 突出 。 
选择 恰当 的 字体 ,使 字体 在 符合 整体 风格 的 基础 上 具有 独特 性 。 
e 版式 的 设计 要 注意 留 白 ,给 访问 者 提供 想象 空间 。 
合理 地 运用 色彩 。 因 为 访问 者 对 色彩 的 反映 比 对 形状 的 反映 更 为 敏锐 和 直接 ,更 能 
激发 情感 ,在 色彩 选择 方面 ,基色 要 相对 稳定 ,要 强调 色彩 的 记忆 感 和 感情 规律 , 合 
理 使 用 色彩 的 对 比 关系 ,因为 色彩 的 对 比 能 产生 强烈 的 视觉 效果 ,而 色彩 的 调和 则 
构成 空间 层次 。 


19.2.4 LOGO 实例 制作 


为 了 便于 网 上 信息 传播 ,一 个 统一 的 国际 标准 是 需要 的 。 实 际 上 已 经 有 了 这 样 的 一 整 
套 标 准 。 关 于 网 站 LOGO 现在 主要 有 三 种 规格 。 

e@ 88 像素 X31 像素 :这 是 目前 最 普遍 的 LOGO 规格 。 

e@ 120 像素 X60 像素 :这 种 规格 用 于 中 型 大 小 的 LOGO。 

e@ 120 像素 X90 像素 :这 种 规格 用 于 大 型 LOGO。 

下 面 就 以 “三 剑侠 客 网 ”为 站 名 来 设计 LOGO, 设 计 效 果 如 图 19. 16 所 示 。 





图 19. 16 “三 剑侠 客 网 ”站 点 LOGO 效果 


具体 操作 步骤 如 下 。 

(1) 启动 Fireworks 8, 新 建文 档 , 设 置 夯 布 大 小 为 88 像素 X31 像素 。 本 例 为 了 便于 读 
者 观察 效果 ,特意 把 画布 放大 4 售 , 即 实际 画布 大 小 为 352 像素 X124 像素 。 

(2) 制作 背景 。 用 齿 形 工具 在 编辑 窗口 中 拖 绘 出 一 个 矩形 ,大 小 和 画布 相同 ,使 其 填充 
整个 画布 。 然 后 在 【属性 了 面板 中 设置 “金属 一 细 条 ?图 案 填 充 , 设 置 边缘 羽化 值 为 
40。 选 用 指针 工具 在 编辑 窗口 中 选中 该 层 并 调整 图 案 填充 效果 ,如 图 19. 17 所 示 。 
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(3) 修饰 背景 。 以 同样 的 方式 在 金属 背景 上 加 一 道 霞光 ,设置 矩形 填充 为 矩形 渐变 , 具 
体 步 骤 如 图 19. 18 所 示 。 其 中 设置 渐变 颜色 从 黄色 到 白色 渐变 ,在 编辑 窗口 中 拉 长 
横向 渐变 控制 柄 ,同时 缩短 纵向 渐变 控制 柄 ,实现 一 道 霞光 的 效果 。 








图 19.17 制作 背景 图 19.18 修饰 背景 
(4) 导入 事先 准备 的 “一 把 剑 ” 位 图 ,缩小 到 合适 的 大 小 ,并 使 其 居中 显示 。 选 择 【窗口 〗 
【样式 ] 命 令 ,在 该 面板 中 选择 一 种 样式 ,为 剑 增加 寒光 ,如 图 19. 19 所 示 。 
(5) 增加 网 站 文字 。 用 文本 工具 分 别 输入 “三 ”“ 侠 ”和 *“ 客 ”, 并 使 其 排列 均匀 、 重 直 居 
中 显示 。 再 导入 事先 用 其 他 软件 制作 好 的 * 剑 " 字 位 图 ,在 [属性 ] 面 板 中 为 该 字 位 图 
增加 发 光 滤 镜 , 发 光 颜 色 为 红色 ,如 图 19. 20 所 示 。 
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图 19. 19 导入 位 图 图 19. 20 输入 文字 
(6) 制作 网 站 图 标 。 用 拖 选 工具 绘制 一 个 正 圆 形 ,绿色 填充 ,设置 边框 为 无 。 然 后 复制 
该 圆 形 , 并 适当 缩小 ,以 白色 填充 遮盖 大 圆 中 心 的 区 域 。 再 用 白色 矩形 覆盖 一 边 ， 
效果 如 图 19. 21 所 示 。 
(7) 先 选择 下 面 两 个 路 径 , 选 择 【修改 YI【 组 合 路 径 3I【 打 孔 ] 命 令 , 然 后 同时 选择 打 孔 路 
径 和 上 面 的 路 径 , 再 选择 [修改 YI【 组 合 路 径 YI【 打 孔 3 命 令 , 则 产生 一 个 特殊 的 图 形 
元 件 , 如 图 19. 22 所 示 。 








图 19. 21 绘制 路 径 | 图 19.22 组 合 路 径 
(8) 复制 该 组 合 的 图 形 元 件 3 次 ,然后 以 一 个 固定 点 分 别 旋转 图 形 元 件 90"、180" 和 
270" ,效果 如 图 19. 23 所 示 。 
(9) 最 后 把 这 些 图 形 元 件 组 合 为 对 象 ,并 在 [样式] 面板 中 应 用 一 种 样式 ,实现 投影 立体 
效果 ,如 图 19. 23 所 示 。 
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图 19.23 制作 图 标 效果 


19.3 ”Banner 设计 


Banner 一 词 在 英文 中 的 意思 为 旗帜 ,也 就 是 常 说 的 广告 条 ,主要 用 于 传递 一 些 信 息 , 起 
到 广 而 告 之 的 目的 ,例如 ,网 站 要 开展 的 活动 .网 站 的 新 动向 、 商 品 信息 等 。Banner 与 LOGO 
在 传递 信息 方面 的 区 别 在 于 网 站 的 Banner 可 以 用 于 非 本 网 站 的 信息 传递 。 
19.3.1 网 站 Banner 


相信 大 家 对 网 站 的 Banner 都 很 熟悉 ,因为 在 浏览 网 页 时 ,经 常会 被 各 种 各 样 设计 独特 、 
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色彩 艳丽 的 Banner 所 吸引 。 由 于 网 站 Banner 的 作用 就 是 向 广大 的 访问 者 传递 信息 ,而 且 随 

着 网 络 的 发 展 ,网 站 Banner 已 经 成 为 网 络 广告 的 重要 途径 ,也 是 一 些 以 广告 为 赢利 目的 网 站 

的 重要 手段 ,所 以 在 设计 网 站 Banner 时 应 该 注意 以 下 几 点 。 

e@ 具有 鲜明 的 色彩 。 网 站 Banner 只 有 具有 鲜明 的 色彩 ,才能 在 第 一 时 间 吸 引 访 问 者 
的 注意 ,色彩 的 选用 ,应 该 尽量 使 用 红 、 栓 、 蓝 、 绿 、 黄 等 艳丽 的 颜色 ,如 图 19. 24 所 示 


的 Banner 使 用 了 4 种 颜色 组 合 。 





图 19.24 鲜明 的 颜色 
e ”语言 具有 号 召 力 。 日常 生活 中 做 广告 的 目的 ,就 是 要 使 消费 者 去 购买 所 宣传 的 产 
品 ,在 消费 者 的 心中 树立 该 产品 的 形象 。 如 熟悉 的 雪 焉 饮料 的 广告 语 “ 唱 晶 亮 , 透 心 
凉 ”, 澳 柯 玛 冰柜 的 广告 语 “ 没 有 最 好 ,只 有 更 好 ”等 ,这 些 广告 都 是 通过 具有 号 召 力 
的 语言 而 深入 人 心 。 在 网 站 的 Banner 中 也 同样 具有 这 个 特点 ,让 文字 给 访问 者 很 
强 的 号 召 力 、 吸 引力 ,如 图 19. 25 所 示 的 Banner 所 使 用 的 语言 。 


Se 无 所 不 有 的 网 上 商店 


【数码 产品 





刻 肪 音 影 王 A PE- sh 卡西欧 NDY 
612 S12 机 攻 -300D-1AY 
国 洛 芝 Be Y299 Y ta Y 568 


图 19.25 语言 具有 号 召 力 





e 文字 的 字体 。Banner 的 设计 初 于 就 是 要 最 大 限度 地 吸引 访问 者 的 注意 力 , 所 以 字体 
的 字号 不 能 过 小 ,字体 的 间隙 也 不 能 过 于 拥挤 ,一 般 来 说 选择 的 字体 要 大 小 适中 , 字 
体 之 间 要 用 足够 的 间隙 ,使 其 能 够 清晰 地 展现 在 访问 者 的 视线 中 。 如 图 19. 26 所 示 
的 Banner 的 字体 就 十 分 清晰 ,使 访问 者 能 很 直观 地 了 解 其 所 传递 的 信息 。 


Ne a 


音程 机 票 3800 元 、 往 运往 机 票 6400 元 “ 户 
图 19.26 文字 的 字体 醒目 
ee 图形 。 在 Banner 设计 中 ,主体 图 形 一 般 都 会 放置 在 Banner 的 左 侧 , 这 样 符合 浏览 的 
习惯 ,因为 人 在 看 物体 时 ,都 是 按照 视觉 习惯 ,从 左 到 右 浏 览 ,所 以 将 图 形 放置 到 
Banner 的 左 侧 ,更 能 吸引 访问 者 的 注意 ,如 图 19. 27 所 示 。 


















19.27 图 形 的 使 用 
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19. 3.2 ”Banner 实例 制作 


Banner 和 LOGO 一 样 也 有 一 定 的 标准 ,1997 美国 报 业 协 会 第 一 次 公布 了 网 络 广 告 
(Banner) 的 标准 : 
e 横幅 广告 长 宽 为 468 像素 X60 像素 。 
e 导航 广告 长 宽 为 392 像素 X72 像素 。 
e 半幅 广告 长 宽 为 234 像素 X60 像素 。 
e 坚 幅 广告 长 宽 为 120 像素 X240 像素 。 
2001 年 美国 互联 网 广告 联合 会 公布 了 新 网 络 广告 标准 : 
“摩天 大 楼 ” 形 长 宽 为 120 像素 X600 像素 。 
“ 宽 摩 天 大 楼 ” 形 长 宽 为 160 像素 X600 像素 。 
长 方形 长 宽 为 180 像素 X150 像素 。 
中 级 长 方形 长 宽 为 300 像素 X250 像素 。 
大 长 方形 长 宽 为 336 像素 X280 像素 。 
坚 长 方形 长 宽 为 240 像素 X400 像素 。 
® “正方 形 弹出 ” 式 广告 长 宽 为 250 像素 X250 像素 。 
目前 制作 Banner 所 使 用 的 工具 主要 包括 Flash、Fireworks、Imageready 等 。Flash 适合 
制作 超 眩 动 态 效 果 的 网 页 广告 ,而 Fireworks 和 Imageready 仅 能 够 制作 GIF 格式 的 交换 图 
像 广告 ,不 过 其 适应 范围 和 适应 能 力 都 比较 强 。 下 面 结 合 一 个 实例 介绍 用 Fireworks 制作 
Banners 的 过 程 ,具体 操作 步骤 如 下 。 
(1) 启动 Fireworks 8, 新 建文 档 , 设 置 夯 布 大 小 为 468 像素 X60 像素 。 
(2) 制作 第 1 帧 图 像 。 选 择 【窗口 I【 帧 3 命令 ,打开 [ 帧 ] 面 板 , 单 击 [ 新 建 / 重 制 帧 ] 按 钮 ， 
增加 * 帧 1”。 : 
(3) 导入 事先 制作 好 的 截图 ,并 摆 放 在 编辑 窗口 中 间 。 用 文本 工具 输入 3 个 文字 有 剑 仿 
客 ”, 然 后 增加 MotionTrail 滤 镜 ,该 滤 镜 的 功能 就 是 实现 选 定 对 象 运动 轨迹 ,增加 
过 程 和 效果 如 图 19. 28 所 示 。 
(4) 然后 在 MotionTrail 对 话 框 中 设置 轨迹 的 方向 ,长 短 和 透明 度 , 如 图 19. 29 所 示 。 
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图 19.28 设置 动态 轨迹 文本 图 19. 29 定义 MotionTrail 对 话 框 

(5) 复制 文本 路 径 ,为 其 增加 杂 点 滤 镜 ,并 降低 文本 对 象 的 透明 度 ,起 到 浑 染 作用 。 

(6) 再 复制 一 个 文本 路 径 , 设 置 文本 颜色 为 红色 ,大 小 为 8, 并 移 到 右 眼 珠 上 ,起 到 提示 
作用 ,营造 一 种 高 速 动态 和 惊 忍 的 画面 效果 ,如 图 19. 30 所 示 。 

(7) 新 建 一 个 帧 ,导入 事先 准备 好 的 位 图 截图 ,并 调整 好 大 小 和 位 置 , 用 文本 工具 输入 
“剑客 不 可 县 ”, 如 图 19. 31 所 示 。 








图 19.30 增加 修饰 文本 图 19.31 定义 第 2 帧 图 像 


(8) 增加 第 3 帧 ,导入 位 图 背景 ,用 文本 工具 输入 “利器 铸就 剑客 ”, 在 [属性 了 面板 中 为 文 
本 增加 投影 滤 镜 效果 ,具体 参数 设置 可 以 根据 个 人 爱好 设置 ,但 要 设置 投影 颜色 为 
白色 ,起 到 增 亮 画面 的 作用 ,同时 设置 文本 填充 为 波纹 渐变 ,渐变 色 从 红色 到 白色 
渐变 ,最 后 在 编辑 窗口 中 调整 渐变 方向 和 大 小 效果 ,如 图 19. 32 所 示 。 

(9) 增加 第 4 帧 ,导入 位 图 背景 ,用 文本 工具 输入 “剑客 源 于 用 心 ”, 在 [属性 3 面板 中 为 文 
本 增加 发 光 滤 镜 效果 ,具体 参数 设置 可 以 根据 个 人 爱好 设置 ,但 要 设置 投影 颜色 为 
白色 ,起 到 增 亮 画 面 的 作用 ,同时 设 管 文本 填充 为 椭圆 形 渐变 ,渐变 色 从 红色 到 白 
色 渐 变 ,最 后 在 编辑 窗口 中 调整 渐变 方向 和 大 小 效果 ,如 图 19. 33 所 示 。 
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图 19.32 增加 修饰 文本 


(10) 增加 第 5 帧 ,导入 位 图 背景 ,用 文本 工具 输入 “三 剑侠 客 网 ”, 在 【属性 面板 中 设置 
文本 大 小 为 40 ,颜色 为 红色 。 同 时 为 文本 增加 投影 滤 镜 效果 ,具体 参数 设置 可 以 
根据 个 人 爱好 设置 ,但 要 设置 投影 颜色 为 白色 ,起 到 增 亮 画 面 的 作用 ,效果 如 
图 19. 34 所 示 。 

(11) 再 用 文本 分 别 输入 “成 就 你 的 "和 “梦想”, 为 “梦想 ”文本 设置 黄色 描 边 、 红 色 填 充 ， 
并 设置 发 光 滤 镜 特效 ,产生 一 种 金碧辉煌 的 视觉 效果 ,如 图 19. 35 所 示 。 
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图 19.34 定义 第 5 帧 图 像 图 19.35 再 次 输入 文本 


(12) 设置 图 像 切换 的 延 时 速度 。 由 于 本 GIF 动画 共有 5 副 图 像 ,每 幅 图 像 的 显示 时 间 
长 短 也 不 一 样 , 因 此 需要 为 每 幅 图 像 设 置 显示 时 间 ,在 【 帧 3 面板 中 双击 每 个 帧 后 面 
延 时 数值 ,在 打开 的 面板 中 重新 设置 延 时 数值 ,具体 数值 可 以 根据 需要 设置 ,如 
图 19. 36 所 示 。 本 例 中 前 面 帧 延 时 较 短 ,后 面 较 长 :形成 一 种 前 紧 后 慢 的 感觉 ,以 
营造 一 种 由 紧张 到 宽松 的 气氛 。 

(13) 调整 满意 之 后 ,就 可 以 导出 为 GIF 格式 的 动画 了 。 选 择 [ 文 件 ] 了 民 导 出 向 导 ] 命 令 ， 
打开 【导出 向 导 3 对 话 框 。 保 持 默 认 设置 , 单 击 【继续 按钮 ,在 打开 的 第 2 步 对 话 框 
中 选择 [GIF 动画 了 单 选 按钮 ,如 图 19. 37 所 示 。 
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图 19.36 定义 各 帧 的 延 时 速度 图 19.37 导出 图 像 向 导 


(14) 单 击 [ 继 续 3 按 钮 .打开 【图 像 预览 ] 对 话 框 ,在 [选项] 选项 卡 中 设置 如 图 19. 38 所 
示 。 切 换 到 [动画 】 选 项 卡 , 设 置 如 图 19. 39 所 示 。 
(15) 单 击 【 导 出 3 按钮 ,在 打开 的 对 话 框 中 保存 GIF 动画 ,浏览 效果 如 图 19. 40 所 示 。 



































图 19.38 【选项 ] 选 项 卡 图 19.39 【动画 ] 选 项 卡 





图 19. 40 ”Banner 浏览 效果 





00 过 
本 章 内 容 包括 : 
全 网 站 定位 
全 网 站 创意 
全 网 站 设计 与 材料 搜集 





本 章 要 点 : 


任何 一 个 网 站 .在 建站 之 初 都 会 有 一 个 设想 ,或 者 说 有 一 种 期 望 ,希望 站 点 能 帮助 实现 不 


同 的 愿望 ,例如 ,宣传 企业 形象 . 商 中 .或 者 内 部 信息 交流 等 。 不 论 是 正规 的 商业 网 站 还 
是 个 人 网 站 ,要 想 把 网 页 做 得 丰富 多 彩 , 吸引 大 量 浏览 者 访问 ,网 站 策划 设计 是 至 关 重 要 的 。 
本 章 将 从 建站 之 初 的 策划 开始 介绍 网 站 建设 全 过 程 的 技巧 











有 效 的 策划 归于 策划 人 的 信息 与 设想 的 浏览 者 之 间 是 否 有 默契 的 交流 。 尽 管 这 听 起 来 
很 抽象 ,但 要 明白 在 网 络 上 浩如烟海 的 信息 中 ,人 们 被 网 络 、 电 子 信箱 、 信 件 、 报 纸 、 商 业 广 
告 .路 边 广告 等 各 种 信息 充斥 着 ,如 何 才 能 使 自己 的 信息 得 到 人 们 的 注意 。 有 效 策划 的 第 一 
步 要 明确 下 面 4 个 问题 。 

e 确定 网 站 想 要 表达 什么 ? 

@ 浏览 者 为 什么 需要 这 些 信 息 ? 

@ ”准备 给 浏览 者 留 下 什么 样 的 印象 ? 

e 让 浏览 者 看 完 信息 之 后 有 什么 反应 ? 

当 回 答 这 些 问题 的 时 候 ,其 实 已 经 在 向 制作 出 一 个 能 达到 目的 的 网 站 前 进 了 一 步 。 


20.1.1 确定 网 站 想 要 表达 什么 


明确 自己 的 信息 , 听 起 来 是 个 很 显然 的 道理 ,但 有 很 多 网 站 就 是 在 这 一 点 上 做 得 很 不 
好 。 用 户 不 会 经 常 访问 那些 信息 很 混乱 的 网 站 ,这 些 网 站 看 过 之 后 甚至 还 不 能 确认 它 是 在 
推销 商品 ,还 是 想 告诉 有 关 信 息 ,或 者 仅仅 只 是 在 浪费 浏览 者 的 时 间 。 

当 人 们 访问 网 站 的 时 候 , 浏 览 者 需要 尽快 了 解 网 站 的 信息 ,需要 对 此 产生 兴趣 ,从 而 停 
留 在 那儿 、 学 到 东西 ,做 出 反馈 。 通 过 明确 想 要 说 什么 , 才 可 以 知道 信息 应 该 如 何 传递 。 

用 户 不 妨 使 用 草稿 纸 简单 记 下 想 要 告诉 观众 的 东西 ,用 简单 的 话 来 描述 建站 的 目的 。 


20. 1.2 了 解 浏览 者 为 什么 需要 这 些 信 息 





抓 住 浏览 者 注意 力 的 关键 是 要 明白 他 们 需要 或 者 想 要 了 解 什么 信息 。 通 过 关注 观众 的 
需求 ,可 以 使 自己 更 容易 地 做 规划 ,做 出 来 的 网 站 也 更 能 吸引 观众 。 
将 浏览 者 访问 网 页 的 可 能 存在 的 初衷 罗列 出 来 : 
ee 解决 实际 问题 。 
浏览 网 页 很 舒服 。 
可 以 与 网 页 进行 交互 。 
了 解 奇闻 轶 事 ,专业 知识 .时 事 新 闻 。 
给 浏览 者 提供 机 会 。 
展示 新 方法 。 
提高 个 人 思想 认识 。 
能 开阔 视野 。 


这 张 清 单 并 不 包含 所 有 理由 , 列 在 这 里 仅 作为 一 个 参考 。 如 果 可 能 的 话 ,在 简要 记 下 浏 
览 者 需要 信息 的 时 候 , 将 这 些 理由 区 分 一 下 先后 顺序 。 

哪些 卖点 最 可 能 获得 浏览 者 的 注意 力 ? 等 到 制定 网 站 结构 的 时 候 , 这 些 理由 的 先后 顺 
序 会 有 一 些 帮 助 。 


20.1.3 给 浏览 者 留 下 什么 样 的 印象 
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彻底 了 解 站 点 给 人 的 印象 ,可 以 从 下 面 几 方 面 来 理 清 思路 : 

(1) 如 果 只 用 一 句 话 来 描述 自己 的 站 点 ,应 该 是 ? 

参考 答案 :有 创意 ,很 专业 ,有 (技术 ) 实 力 , 有 美感 ,有 冲击 力 等 。 

(2) 想 到 自己 的 站 点 ,可 以 联想 到 的 色彩 是 ? 

参考 答案 :热情 的 红色 ,幻想 的 天 蓝 色 ,聪明 的 金黄 色 等 。 

(3) 想 到 自己 的 站 点 ,可 以 联想 到 的 画面 是 ? 

参考 答案 :一 份 早报 ,一 辆 法 拉 利 跑车 ,人 群 拥挤 的 广场 ,杂货 店 等 。 

(4) 如 果 网 站 是 一 个 人 ,他 拥有 的 个 性 是 ? 

参考 答案 :思想 成 熟 的 中 年 人 , 狂 时 奔放 的 牛仔 ,自信 王 厚 的 创业 者 等 。 

(5) 作 为 站 长 ,希望 给 浏览 者 的 印象 是 ? 

参考 答案 :敬业 ,认真 投入 ,有 深度 ,负责 ,纯真 ,直爽 ,淑女 等 。 

(6) 用 一 种 动物 来 比喻 ,你 的 网 站 最 像 什么 ? 

参考 答案 : 猫 (神秘 高 贵 ) ,应 (目光 锐利 ) ,兔子 (聪明 敏感 ) ,狮子 (自信 威信 ) 等 。 

(7) 浏 览 者 觉得 你 和 其 他 网 站 的 不 同 是 ? 

参考 答案 :可 以 信赖 ,信息 最 快 ,交流 方便 等 。 

(8) 浏 览 者 和 你 交流 合作 的 感受 是 ? 

参考 答案 : 师 生 ,同事 ,朋友 ,长 幼 。 

现在 可 以 自己 先 填写 一 份 答案 ,然后 让 其 他 网 友 填 写 。 比 较 后 的 结果 会 显示 自己 网 站 
现在 的 差距 、 弱 点 及 需要 改进 的 地 方 。 





20.1.4 ” 想 让 浏览 者 做 什么 


设想 网 站 制作 完毕 ,浏览 者 浏览 网 页 时 会 有 什么 行为 ? 列 一 个 清单 如 下 。 , 
发 邮件 向 站 点 获取 更 多 信息 。 
填写 订单 。 @ 
打 电 话 购买 产品 或 服务 。 

按 要 求 完成 调查 表 或 申请 表 。 
参加 网 站 投票 。 

注册 会 员 。 
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e ”把 站 点 加 入 收藏 夹 ,定期 访问 。 

明确 想 让 浏览 者 做 什么 是 非常 重要 的 。 可 能 在 上 面 的 清单 里 没有 列 出 全 部 ,但 在 建站 
时 一 定 要 确信 已 经 记录 下 了 所 有 想 要 的 行为 ,如 果 可 能 的 话 ,将 它们 在 清单 上 按 优先 顺序 
排 好 。 


20.2 网 站 创意 


创意 是 网 站 生存 的 关键 。 如 何 挖掘 创意 的 来 源 ? 一 个 出 色 的 创意 并 不 是 信 手 拓 来 的 ， 
它 需 要 完成 很 多 工作 。 对 一 个 创意 策划 人 员 来 讲 ,首先 要 有 敏锐 的 头脑 去 捕捉 稍 纵 即 逝 的 
灵感 ,其 次 是 用 坚持 不 懈 的 工作 来 实现 创意 。 

创意 到 底 是 什么 ,如 何 产 生 创意 呢 ? 

创意 是 引人入胜 ,精彩 万 分 ,出 其 不 意 的 …… 

创意 是 捕捉 出 来 的 点 子 , 是 创作 出 来 的 奇 招 …… 

创意 来 自生 活 。 一 个 好 的 创意 百 分 之 一 来 自 灵感 ,而 其 余 百 分 之 九 十 九 来 自 不 懈 的 
努力 。 


20.2.1 创意 是 传达 信息 的 一 种 特别 方式 


比如 Webdesigner( 网 页 设计 师 ) ,我 们 将 其 中 的 下 字母 大 写 一 下 :wEbdEsignEr, 感 觉 怎 
么 样 ,这 其 实 就 是 一 种 创意 。 

创意 并 不 是 天 才 者 的 灵感 ,而 是 思考 的 结果 。 根 据 美 国 广告 学 教授 俯 姆 斯 的 研究 ,创意 
思考 的 过 程 分 为 五 个 阶段 。 

® ”准备 期 :研究 所 搜集 的 资料 ,根据 旧 经 验 ,启发 新 创意 。 
孵化 期 :将 资料 咀嚼 消化 ,使 意识 自由 发 展 ,任意 结合 。 
启示 期 :意识 发 展 并 结合 ,产生 创意 。 
验证 期 :将 产生 的 创意 讨论 修正 。 
形成 期 :设计 制作 网 页 ,将 创意 具体 化 。 


20. 2.2 创意 是 将 现 有 的 要 素 重新 组 合 


比如 ,网 络 与 电话 结合 ,产生 IP 电话 。 从 这 一 点 上 出 发 ,任何 人 都 可 以 创造 出 不 同 凡响 
的 创意 。 而 且 ,资料 越 丰富 , 越 容易 产生 创意 。 就 好 比 万 花 简 , 简 内 的 玻璃 片 越 多 ,所 呈现 的 
图 案 越 多 。 如 果 有 心 可 以 发 现 ,网 络 上 最 多 的 创意 来 自 于 现实 生活 的 结合 (或 者 虚拟 现实 )， 
如 在 线 书 店 、 电 子 社区 ,在 线 拍卖 。 


创意 思考 最 常用 的 途径 是 联想 ,这 里 提供 了 网 站 创意 的 25 种 联想 线索 。 
(0 


把 它 缩小 ; 

把 颜色 换 一 下 ; 

使 它 更 长 ; 

使 它 闪 动 ; 

把 它 放 进 音乐 里 ; 

结合 文字 音乐 图 画 ; 

使 它 成 为 年 轻 的 ; 

使 它 重复 ; 

使 它 变 成 立体 ; 

参加 竞赛 ; 

参加 打赌 ; 

变更 一 部 分 ; 

分 裂 它 ; 

使 它 罗曼 蒂 克 ; 

使 它 速度 加 快 ; 

增加 香味 ; 

使 它 看 起 来 流行 ; 

使 它 对 称 ; 

将 它 向 儿童 诉求 ; 

价格 更 低 ; 

给 它 起 个 绰号 ; 

把 它 打 包 ; 

免费 提供 ; 

以 上 各 项 延伸 组 合 。 
需要 一 提 的 是 :创意 的 目的 是 更 好 地 宣传 推广 网 站 。 如 果 创 意 很 好 , 却 对 网 站 发 展 毫 无 

意义 ,那么 创意 也 就 没有 实用 价值 。 


20.3 网 站 设计 与 素材 搜集 


网 站 设计 与 网 站 制作 是 有 区 别 的 。 它 们 的 区 别 在 于 设计 是 一 个 思考 的 过 程 ,而 制作 只 
是 将 思考 的 结果 表现 出 来 。 一 个 成 功 的 网 站 首先 需要 一 个 优秀 的 设计 ,然后 辅 之 优秀 的 制 
作 。 设 计 是 网 站 的 核心 和 灵魂 ,一 个 相同 的 设计 可 以 有 多 种 制作 表现 的 方式 。 
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20.3.1 设计 网 站 主题 和 名 称 


设计 一 个 站 点 ,首先 遇 到 的 问题 就 是 定位 网 站 主题 。 
所 谓 主 题 也 就 是 你 的 网 站 的 题材 。 网 络 上 的 网 站 题材 千奇百怪 ,琳琅 满目 。 只 要 想 得 
到 ,就 可 以 把 它 制 作出 来 。 下 面 是 美国 (个 人 电脑 杂志 (PC Magazine) 评 出 的 1999 年 度 排名 
前 100 位 的 全 美 知名 网 站 的 十 类 题材 。 
第 1 类 :网 上 求职 
第 2 类 :网 上 聊天 /即时 信息 /ICQ 
第 3 类 :网 上 社区 /讨论 /邮件 列表 
第 4 类 :计算 机 技术 
第 5 类 :网 页 /网 站 开发 
第 6 类 :娱乐 网 站 
第 7 类 :旅行 
第 8 类 :参考 /资讯 
第 9 类 :家 庭 /教育 
第 10 类 :生活 /时 尚 
每 个 大 类 都 可 以 继续 细 分 ,比如 娱乐 类 再 分 为 体育 /电影 /音乐 大 类 ,音乐 又 可 以 按 格式 
分 为 MP3、VQF Ra, 按 表现 形式 分 古典 现代、 摇滚 等 。 以 上 都 只 是 最 常见 的 题材 ,还 有 许 
多 专业 的 .另类 的 、 独 特 的 题材 可 以 选择 ,如 中 医 、 热 带鱼 .天气 预报 等 ,同时 ,各 个 题材 相 联 
系 和 交叉 结合 可 以 产生 新 的 题材 ,例如 旅游 论坛 (旅游 十 讨论 ) .经典 入 球 播放 (足球 十 影 
视 )。 按 这 样 分 下 去 ,题材 可 以 有 成 千 上 万 个 ,你 不 会 再 为 题材 重复 、 难 以 选择 而 烦恼 了 。 
其 实 网 站 名 称 也 是 网 站 设计 的 一 部 分 ,而 且 是 很 关键 的 一 个 要 素 。 例 如 “电脑 学 习 室 ” 
和 “电脑 之 家 ”显然 是 后 者 简练 ;“ 迷 笛 乐园 "和 “MIDI 乐园 ”显然 是 后 者 明晰 六 儿童 天 地 ”和 
“中 国 幼 儿 园 ” 显 然 是 后 者 大 气 。 和 现实 生活 中 一 样 ,网 站 名 称 是 否 正气 、 响 亮 , 易 记 , 对 网 站 
的 形象 和 宣传 推广 也 有 很 大 影响 。 下 面 列 出 三 点 建议 。 
e 名称 要 正 。 就 是 要 合法 、 合 理 、 合 情 。 不 能 用 反动 的 .色情 的 .迷信 的 或 危害 社会 安 
全 的 名 词语 句 。 
e@ 名 称 要 易 记 。 根 据 中 文 网 站 浏览 者 的 特点 ,除非 特定 需要 ,网 站 名 称 最 好 用 中 文 名 
称 , 不 要 使 用 英文 或 者 中 英文 混合 型 名 称 。 如 :beyondstudio 和 超越 工作 室 , 后 者 更 
亲切 好 记 。 另 外 ,网 站 名 称 的 字数 应 该 控制 在 六 个 字 ( 最 好 四 个 字 ) 以 内 ,如 “XX 
阁 ”“XX 设计 室 ”, 四 个 字 的 可 以 用 成 语 ,如 “一 网 打 进 ”"。 字 数 少 还 有 个 好 处 ,一 般 
友情 链接 的 小 logo 尺寸 是 88X 31, 而 六 个 字 的 宽度 是 78 左右 ,适合 于 其 他 站 点 的 链 
接 排版 。 
e 名 称 要 有 特色 。 名 称 平实 就 可 以 接受 ,如 果 能 体现 一 定 的 内 涵 , 给 浏览 者 更 多 的 视 
觉 冲击 和 空间 想象 力 , 则 为 上 品 。 如 音乐 前 卫 、 网 页 陶 吧 、 天 籁 绝 音 。 在 体现 出 网 站 


主题 的 同时 ,能 点 出 特色 之 处 。 
总 之 ,定位 题材 和 名 称 是 设计 一 个 网 站 的 第 一 步 , 也 是 很 重要 的 一 部 分 。 如 果 能 找到 一 
个 满意 的 名 称 , 花 一 天 时 间 翻 字典 也 是 值得 的 。 


20. 3.2 确定 网 站 的 栏目 和 版 块 


建立 一 个 网 站 好 比 写 一 篇 文章 ,首先 要 拟 好 提纲 ,文章 才能 主题 明确 ,层次 清晰 ;也 好 比 
造 一 座高 楼 ,首先 要 设计 好 框架 图 纸 .才能 使 楼 房 结构 合理 。 

初学 者 最 容易 犯 的 错误 就 是 :确定 题材 后 立刻 开始 制作 。 当 一 页 一 页 制作 完毕 后 才 发 
现 网 站 结构 不 清晰 ,目录 庞杂 ,内 容 东 一 块 西 一 块 。 结 果 不 但 浏览 者 看 得 糊涂 ,自己 扩充 和 
维护 网 站 也 相当 困难 。 

栏目 的 实质 是 一 个 网 站 的 大 岗 索 引 , 索 引 应 该 将 网 站 的 主体 明确 显示 出 来 。 在 制定 栏 

目的 时 候 ,要 仔细 考虑 ,合理 安排 。 一 般 的 网 站 栏目 安排 要 注意 以 下 几 方 面 : 

e 一 定 记 住 要 紧 扣 网 站 的 主题 。 一 般 的 做 法 是 :将 主题 按 一 定 的 方法 分 类 并 将 它们 作 
为 网 站 的 主 栏目 。 主 题 栏目 个 数 在 总 栏目 中 要 占 绝对 优势 ,这 样 的 网 站 显得 专业 ， 
主题 突出 ,容易 给 人 留 下 深刻 印象 。 

e 设 一 个 最 近 更 新 或 网 站 指南 栏目 。 如 果 首页 没有 安排 版 面 放置 最 近 更 新 内 容 信息 ， 
就 有 必要 设立 一 个 “最 近 更 新 ”的 栏目 。 这 样 做 是 为 了 照顾 常 来 的 访客 ,让 网 站 的 主 
页 更 有 人 性 化 。 

如 果 主 页 内 容 庞大 (超过 15MB) ,层次 较 多 ,而 又 没有 站 内 的 搜索 引擎 ,最 好 设置 “本 
站 指南 ”栏目 。 可 以 帮助 初 访 者 快速 找到 他 们 想 要 的 内 容 。 

®” 设 定 一 个 可 以 双向 交流 的 栏目 。 不 需要 很 多 ,但 一 定 要 有 。 如 论坛 .留言 本 、 邮 件 列 
表 等 ,可 以 让 浏览 者 留 下 他 们 的 信息 。 有 调查 表明 ,提供 双向 交流 的 站 点 比 简单 地 
留 一 个 E-mail 的 站 点 更 具有 亲和力 。 

e 设 一 个 下 载 或 常见 问题 回答 栏目 。 网 络 的 特点 是 信息 共享 。 如 果 看 到 一 个 站 点 有 
大 量 的 、 优 秀 的 有 价值 的 资料 ,肯定 希望 能 一 次 性 下 载 .而 不 是 一 页 一 页 浏览 存盘 。 
在 自己 的 主页 上 设置 一 个 资料 下 载 栏目 ,会 得 到 大 家 的 喜欢 。 有 些 站 点 为 了 广告 显 
示 量 ,一 篇 文章 还 要 分 几 页 显示 ,这 就 显得 比较 费劲 。 另 外 ,如 果 站 点 经 常 收 到 网 友 
关于 某 方面 的 问题 来 信 , 最 好 设立 一 个 常见 问题 回答 的 栏目 , 既 方 便 了 网 友 , 也 可 以 
节约 自己 更 多 的 时 间 用 以 学 习 。 

至 于 其 他 的 辅助 内 容 , 如 关于 本 站 、 版 权 信息 等 可 以 不 放 在 主 栏目 里 ,以 免 冲淡 主题 。 

总 结 以 上 几 点 ,我 们 得 出 划分 栏目 需要 注意 的 是 : 

e 尽 可 能 删除 与 主题 无 关 的 栏目 。 

e 尽 可 能 将 网 站 最 有 价值 的 内 容 列 在 栏目 上 。 

ee 尽 可 能 方便 访问 者 的 浏览 和 查询 。 

上 面 说 的 是 栏目 ,我 们 再 看 看 版 块 设置 。 版 块 比 栏目 的 概念 要 大 一 些 ,每 个 版 块 都 有 自 
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旦 已 的 栏目 举 个 例子 :网 易 的 站 点 分 新 闻 、 体 育 、 财 经 .娱乐 .教育 等 版 块 ,每 个 版 块 下 面 有 各 





有 自己 的 主 栏目 。 一 般 的 个 人 站 点 内 容 少 , 只 有 主 栏目 ( 主 菜单 ) 就 够 了 ,不 需要 设置 版 块 。 
如 果 自 己 觉 得 的 确 有 必要 设置 版 块 的 ,应 该 注意 : 


各 版 块 要 有 相对 独立 性 。 
各 版 块 要 有 相互 关联 。 
版 块 的 内 容 要 围绕 站 点 主题 。 


关于 版 块 方面 ,主要 是 门户 站 点 等 较 大 ICP 需要 考虑 的 问题 ,一 般 小 型 网 站 可 以 忽略 。 


20. 3.3 搜集 素材 


多 好 的 想法 如 果 不 能 被 很 好 地 表现 ,那么 也 无 法 被 认可 ,现在 的 任务 就 是 在 网 络 上 对 所 
有 有 助 于 自己 的 相关 材料 进行 搜集 。 
下 面 是 一 些 可 以 搜集 到 的 书面 内 容 : 


公司 传销 材料 (销售 说 明 内 容 说 明 ); 
公司 情况 说 明 书 (零件 清单 .费用 卡 ); 
广告 ; 

新 闻 稿 (包括 传单 .招贴 画 、 邀 请 信 )， 
课程 指南 ; 

公司 培训 资料 (手册 、 指 南 ); 

期 刊 (报纸 、 杂 志 、 公 告 ); 

表格 (订单 .调查 表 、 申 请 表 )。 


寻找 如 下 类 别 的 图 像 : 


提示 
不 管 是 照片 还 是 美术 作品 ,有 可 能 的 话 最 好 使 用 原 图 。 大 多 数 复制 到 印刷 品 上 (比如 


照片 (可 能 的 话 要 原始 图 片 ); 
美术 作品 (标识 、 插 图、 图标 \ 标 示 牌 )。 


杂志 和 报纸 ) 的 图 片 采用 了 过 渡 调 色 技 术 ( 有 时 是 指 经 过 过 滤 ), 这 是 一 个 可 以 让 图 片 在 纸 
上 看 起 来 更 好 一 些 的 优化 过 程 。 过 渡 调 色 技术 可 以 产生 非常 漂亮 的 打印 输出 ,然而 将 其 
扫描 作为 网 络 图 片 的 时 候 ,会 看 到 有 非常 难看 的 点 状 图 案 , 被 称 为 波纹 图 案 。 除 非 用 非常 
复杂 的 图 片 编辑 软件 ,否则 很 难 将 其 除去 。 


下 面 是 能 搜集 到 的 其 他 材料 : 


录像 (广告 .公司 的 录像 ); 

新 闻 文 章 ( 印 刷 品 声音 、 网 上 文章 或 者 录像 带 等 ) ; 
URL 地 址 ; 

分 类 的 参考 资料 。 








Ey 三 二 
本 章 内 容 包括 : 
全 制定 网 站 规划 
全 设计 网 站 结构 
全 网 站 目录 和 文件 规范 


本 章 要 点 : 

网 站 开发 是 一 门 艺术 ,也 是 一 项 技术 .需要 开发 者 的 创意 和 设计 ,当然 也 要 遵循 一 定 的 规 
经 过 无 数 网 站 设计 师 多 年 的 总 结 和 经 验 ,网 站 设计 形成 了 很 多 固定 的 操作 规范 ,理解 和 
运用 这 些 规范 会 给 开发 工作 带 来 方便 。 在 网 站 开发 中 建立 一 套 既定 的 规范 无 疑 会 建立 起 良 
好 的 沟通 和 合作 基础 , 极 大 地 提高 工作 效率 。 

















21.1 制定 网 站 规划 


开发 者 在 与 客户 达成 协议 之 后 ,应 不 要 急于 着 手 制作 ,可 先 仔细 分 析 客 户 的 需求 并 结合 
自己 的 经 验 拟 一 份 初步 的 网 站 建设 方案 给 客户 。 这 是 很 关键 的 一 步 ,与 客户 进行 良好 的 沟 
通 将 为 后 面 的 工作 省 去 很 多 不 必要 的 麻烦 。 


21.1.1 制作 规划 中 的 几 个 问题 


写 规划 的 时 候 不 要 为 了 省 事 而 套用 原来 的 或 类 似 的 规划 方案 。 很 多 客户 虽然 不 是 电脑 
高 手 , 但 是 在 看 文档 的 时 候 格 外 得 仔细 ,尤其 是 对 电子 文件 ,甚至 会 去 看 看 你 的 属性 ,是 谁 写 
的 , 写 给 谁 的 ,这 样 的 客户 会 让 人 十 分 恼火 ,但 是 他 们 的 做 法 又 无 可 挑剔 。 所 以 ,在 写 规划 文 
案 的 时 候 尽 量 不 用 原来 的 文件 修改 另存 。 

写 规划 的 时 候 要 全 面 考虑 问题 ,能 站 在 不 同 的 角度 、 利 用 不 同 的 方法 去 思考 问题 。 例 如 : 

作为 运营 者 ,可 能 关心 的 是 成 本 、 费 用 ,收益 ,也 就 是 自己 想 做 什么 ,做 想 做 的 要 花费 多 
少 ,花费 后 自己 可 以 得 到 什么 。 因 而 ,对 于 运营 者 的 规划 方法 就 是 让 他 们 能 够 认为 物 有 所 
值 ,这 里 说 的 价值 不 但 是 网 站 设计 本 身 的 ,还 有 就 是 在 运营 过 程 中 多 得 到 的 。 

作为 技术 实施 者 ,可 能 关心 的 是 技术 难度 .实施 过 程 、. 最 终 效果 ,也 就 是 从 技术 角度 对 功 
能 实现 的 简单 或 困难 程度 ,实现 某 功 能 所 需要 经 过 的 必然 阶段 和 技术 实现 后 可 以 呈现 在 大 
家 面前 的 最 终 效 果 。 因 而 ,对 于 技术 实施 者 的 规划 方法 就 是 让 他 们 有 发 挥 的 空间 ,对 他 们 存 
在 某 些 技 术 挑 战 ,而 避免 技术 实施 者 因为 网 站 的 简单 化 或 者 模块 化 而 消极 的 应 对 ,一 旦 技术 
人 员 消 极 ,那么 最 终 损失 的 不 是 用 户 .而 是 企业 本 身 。 

作为 一 般 浏 览 者 ,能 关心 的 是 内 容 、 效 果 、 实 用 程度 ,也 就 是 是 否 有 自己 需要 的 东西 ,是 
和 否 搭配 协调 浏览 每 适 , 是 否 操作 简单 方便。 因而 ,对 于 一 般 浏 览 者 的 规划 方法 就 是 让 网 站 
结构 尽量 扁平 ,可 以 让 用 户 在 最 短 的 时 间 内 了 解 整个 网 站 所 要 展现 的 主要 内 容 。 同 时 ,一 般 
的 浏览 者 更 关心 的 是 产品 和 可 以 得 到 的 服务 ,而 不 是 什么 公司 资格 公司 介绍 之 类 的 东西 ， 
因而 产品 /服务 正在 逐步 成 为 各 个 网 站 中 第 一 个 被 介绍 给 一 般 浏览 者 的 事物 。 

写 规划 的 时 候 要 把 功能 和 栏目 (内 容 ) 进 行 绑 定 ,避免 出 现 功能 一 个 不 少 , 但 被 压缩 到 了 
3 一 5 个 栏目 (内 容 ) 中 ,或 者 栏目 (内 容 ) 一 个 不 少 ,功能 被 极力 压缩 :做 了 半天 没 赚 头 。 

例如 : 某 企 业 做 站 点 就 需要 企业 介绍 、 企 业 新 闻 产品 介绍 、 联 系 方式 .留言 板 五 个 基本 
单元 ,如 果 按 照 通常 的 习惯 企业 介绍 、 产 品 介绍 、 联 系 方式 用 静态 页 面 ,企业 新 闻 、 留 言 板 用 
动态 ,很 多 企业 会 选择 企业 新 闻 使 用 静态 页 面 .理由 是 新 闻 少 , 没 必 要 用 动态 。 而 这 个 时 候 
就 会 出 现 费 用 问题 ,如 果 说 一 个 新 闻 模块 是 1000 元 ,而 改 为 静态 最 多 也 就 50 元 /页 ,致使 原 
本 只 有 2000 一 3000 元 的 交易 变 成 了 1000 元 左右 ,而 后 续 的 服务 更 是 难 做 了 。 而 如 果 换 个 方 
法 ,将 企业 介绍 和 企业 新 闻 合 并 还 叫 企业 介绍 ,其 中 不 但 有 企业 介绍 、 企 业 新 闻 , 而 且 还 可 以 


让 企业 自由 发 布 任何 其 他 信息 ,如 总 经 理 致辞 ,企业 结 构图 等 ,这 样 就 等 于 将 一 个 简单 的 栏 
目 变 成 了 复杂 的 ,可 以 在 突出 企业 的 同时 突出 领导 人 物 个 人 形象 的 ,管理 者 一 般 就 不 会 轻易 
地 在 这 样 的 栏目 中 开刀 了 。 


21.1.2 网 站 规划 书 


网 站 规划 书 应 该 尽 可 能 涵盖 网 站 规划 中 的 各 个 方面 ,其 包含 的 内 容 如 下 。 


1 


3 


.市 场 分 析 


相关 行业 的 市 场 是 怎样 的 ,市 场 有 什么 样 的 特点 ,是 否 能 够 在 互联 网 上 开展 公司 
业务 。 

市 场 主要 竞争 者 分 析 ,竞争 对 手 上 网 情况 及 其 网 站 规划 、 功 能 作用 。 

公司 自身 条 件 分 析 、 公 司 概况 ,市场 优 势 .可 以 利用 网 站 提升 哪些 竞争 力 ,建设 网 站 
的 能 力 (费用 、 技 术 . 人 力 等 )。 


.功能 定位 


为 什么 要 建立 网 站 ,是 为 了 宣传 产品 ,进行 电子 商务 ,还 是 建立 行业 性 网 站 ,是 企业 
的 需要 还 是 市 场 开 拓 的 延伸 。 

整合 公司 资源 ,确定 网 站 功能 。 根 据 公 司 的 需要 和 计划 ,确定 网 站 的 功能 :产品 宣传 
型 .网 上 营销 型 .客户 服务 型 .电子 商务 型 等 。 

根据 网 站 功能 ,确定 网 站 应 达到 的 目的 作用 。 

企业 内 部 网 (Intranet) 的 建设 情况 和 网 站 的 可 扩展 性 。 


.技术 解决 方案 


根据 网 站 的 功能 确定 网 站 技术 解决 方案 。 


4 


采用 自 建 服务 器 ,还 是 租用 虚拟 主机 。 

选择 操作 系统 ,用 Unix、Linux 还 是 Windows 2000/NT。 分 析 投 入 成 本 ,功能 、 开 
发 .稳定 性 和 安全 性 等 。 

采用 系统 性 的 解决 方案 (如 IBM、HP 等 公司 提供 的 企业 上 网 方案 ) .电子 商务 解决 方 
案 还 是 自己 开发 。 

网 站 安全 性 措施 , 防 黑客 、 防 病毒 方案 。 

相关 程序 开发 ,如 网 页 程序 ASPJSP.CGI\ 数 据 库 程序 等 。 


. 内 容 规划 


根据 网 站 的 目的 和 功能 规划 网 站 内 容 : 
e 一 般 企业 网 站 应 包括 公司 简介 ,产品 介绍 、 服 务 内 容 、 价 格 信息 、 联 系 方式 .网 上 定单 
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等 基本 内 容 。 
。 电子 商务 类 网 站 要 提供 会 员 注册 .详细 的 商品 服务 信息 .信息 搜索 查询 .定单 确认 、 
付款 .个 人 信息 保密 措施 .相关 帮助 等 。 
。 如 果 网 站 栏目 比较 多 , 则 考虑 采用 网 站 编程 专人 负责 相关 内 容 。 
| 注意 “ 轩 里 时装 时 时 时 时 时 和 时时 和 
网 站 内 容 是 网 站 吸引 浏览 者 最 重要 的 因素 ,无 内 容 或 不 实用 的 信息 不 会 吸引 匆匆 浏 
览 的 访客 。 


| 技巧 ” 轩 和 和 和 和 和 和 


可 事先 对 人 们 和 希望 阅读 的 信息 进行 调查 ,并 在 网 站 发 布 后 调查 人 们 对 网 站 内 容 的 满 
意 度 ,以 及 时 调整 网 站 内 容 。 


5. 网 页 设计 


@ 网 页 美术 设计 一 般 要 与 企业 整体 形象 一 致 ,要 符合 CI 规范 。 要 注意 网 页 色彩 、 图 片 
的 应 用 及 版 面 规划 ,保持 网 页 的 整体 一 致 性 。 
e 在 新 技术 的 采用 上 要 考虑 主要 目标 访问 群体 的 分 布地 域 、 年 龄 阶层 、 网 络 速度 阅读 


习惯 等 。 
e 制定 网 页 改版 计划 ,如 半年 到 一 年 时 间 后 进行 较 大 规模 地 改版 等 。 
6. 网 站 维护 


服务 器 及 相关 软 硬 件 的 维护 ,对 可 能 出 现 的 问题 进行 评估 ,制定 响应 时 间 。 

@ 数据 库 维护 ,有 效 地 利用 数据 是 网 站 维护 的 重要 内 容 , 因 此 数据 库 的 维护 要 受到 
重视 。 

e 内 容 的 更 新 、 调 整 等 。 

e ”制定 相关 网 站 维护 的 规定 ,将 网 站 维护 制度 化 ,规范 化 。 


7. 网 站 测试 


网 站 发 布 前 要 进行 细致 周密 的 测试 ,以 保证 正常 浏览 和 使 用 。 主 要 测试 内 容 有 : 
@ ”服务 器 稳定 性 、 安 全 性 。 

e 程序 及 数据 库 测 试 。 

e 网 页 兼容 性 测试 ,如 浏览 器 。 

ee 根据 需要 的 其 他 测试 。 


8. 发 布 与 推广 
网 站 测试 后 进行 发 布 与 公关 广告 活动 。 





21.2 设计 网 站 结构 


在 设计 网 站 界面 之 前 ,不 妨 先 勾画 出 站 点 结构 图 。 心 中 有 了 蓝图 ,就 有 助 于 构建 网 站 的 
某 一 部 分 或 者 某 个 网 页 。 注 意 , 网 站 有 许多 类 型 ,并 不 是 所 有 网 站 的 设计 目的 都 是 让 用 户 尽 
快 找到 所 需要 的 信息 。 有 些 网 站 完全 是 为 娱乐 目的 而 设计 的 ,有 些 则 是 教育 用 的 ,所 以 其 界 
面 设 计 应 当 能 引导 用 户 ,而 不 是 让 他 们 自己 找 路 。 





21.2.1 网 站 结构 


网 站 结构 指 的 是 网 站 中 各 网 页 页 面 是 如 何 组 织 在 一 起 的 。 网 站 结构 有 三 种 基本 类 型 ， 
即 层次 结构 ,线性 结构 、 网 状 结构 。 


1. 层次 结构 


层次 结构 是 网 站 制作 最 常用 的 一 种 结构 。 在 一 个 层次 化 的 网 站 结构 中 ,浏览 者 可 以 很 
容易 地 知道 自己 在 网 站 中 的 位 置 。 单 击 上 一 级 链接 ,可 以 获得 更 广泛 的 信息 ,而 单 击 下 一 级 
链接 可 获得 更 具体 的 信息 。 

在 层次 结构 中 ,主页 对 它 以 下 的 内 容 提 供 了 总 体 概览 ,还 定义 了 一 些 指 向 更 深层 次 的 页 面 
的 链接 。 如 图 21. 1 所 示 页 面 顶部 ,通过 导航 栏 和 位 置 提示 栏 浏览 者 可 以 轻松 地 在 网 站 中 定位 。 











图 21.1 层次 结构 


2. 线性 结构 


另 一 种 组 织 网 页 文档 的 方式 是 使 用 线性 或 是 有 序 的 组 织 。 在 一 个 线性 结构 中 ,主页 是 
题目 ,或 者 是 介绍 ,而 其 他 的 页 面 则 是 按照 这 种 结构 有 序 地 跟从 。 在 一 个 严格 的 线性 结构 
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中 ,链接 从 一 个 页 面 到 另 一 个 页 面 ,典型 的 说 是 向 前 向 后 。 由 于 只 有 极 少 的 地 方 可 以 去 ,所 
以 在 一 个 线性 结构 中 ,一 般 可 以 轻易 地 确定 在 上 下 文中 的 位 置 。 如 图 21. 2 所 示 的 百度 搜索 
页 面 底部 显示 的 “上 一 页 ”和 * 下 一 页 ”, 以 及 页 码 数字 ,引导 浏览 者 在 一 条 线 上 前 后 定位 。 























图 21.2 线性 结构 


3. 网 状 结构 


网 状 结构 是 一 系列 具有 很 少 或 者 根本 不 具有 总 体 结构 的 文档 结构 。 将 每 个 页 面 系 在 一 
起 的 惟一 东西 就 是 链接 。 网 状 结构 倾向 于 自由 流动 以 及 允许 浏览 者 无 序 地 在 各 个 页 面 之 间 
跳 转 。 这 种 结构 需要 谨慎 使 用 ,如 果 用 户 浏览 该 网 点 时 ,他 的 浏览 目的 是 无 序 或 随意 的 , 那 
么 可 以 使 用 这 种 模式 。 如 图 21. 3 所 示 ,在 右 侧 主体 框架 页 里 ,随意 散布 着 一 些 链接 ,在 这 些 
链接 之 间 没有 任何 联系 (前 后 关系 、 父 子 关系 ) ,浏览 者 可 以 随意 地 单 击 查看 想 要 的 内 容 。 


EE 
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网 页 陶 吧 征 稿 启事 





图 21.3 网 状 结构 


[450)e 


21.2.2 设计 网 站 导航 规范 


1. 当 导 航 按钮 连接 到 当前 页 时 


为 达成 界面 设计 的 一 致 性 ,网 页 页 面 设计 者 可 让 该 按钮 不 再 具有 超 链 接 的 功能 ;或 将 该 
按钮 的 彩 度 .亮度 降低 (如 深 绿色 变 成 淡 绿 色 、 亮 红色 变 成 暗 红 色 ) ,使 浏览 者 能 够 明白 导航 
按钮 不 再 具有 超 链接 的 功能 。 


2. 适当 、 有 效率 地 使 用 超 链接 


适当 、 有 效率 地 使 用 超 链接 ,是 一 个 优良 的 导航 系统 不 可 或 缺 的 要 素 之 一 。 但 过 分 滥 
超 链接 ,反而 损害 了 网 页 页 面 行文 的 流畅 与 可 亲 性 。 

在 一 篇 长 短 适中 的 网 页 页 面 里 (3、4 个 屏幕 页 面 ) ,文章 里 提供 的 文字 式 超 链接 最 好 不 要 
超过 10 个 以 上 ,以 使 全 页 行文 能 够 顺畅 ,而 浏览 者 也 不 至 于 眼见 一 大 堆 超 链接 ,反而 不 知 从 
何 浏览 才 好 。 如 果真 有 那么 多 的 超 链接 必须 提供 给 浏览 者 ,不 妨 将 这 些 超 链接 以 列表 的 方 
式 列 在 目录 页 上 , 既 不 妨碍 行文 的 顺畅 ,又 使 浏览 者 一 目 了 然 ,如 图 21. 4 所 示 。 
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图 21.4 列表 的 形式 列 出 所 有 链接 


3. 超 链 接 的 提示 字符 串 长 短 适 中 


让 超 链接 的 提示 字符 串 长 短 适 中 且 行文 自然 ,字符 串 过 长 (如 整 行 . 整 句 都 是 链接 字符 
串 ) 或 过 短 ( 如 仅 一 个 字 的 链接 ) 都 不 利于 浏览 者 的 阅读 或 单 击 。 


4. 注意 超 链接 颜色 与 单纯 叙述 文字 的 颜色 区 别 


应 将 网 页 内 的 文本 颜色 与 超 链接 用 色 区 分 开 来 ,方便 浏览 。 例 如 ,纯粹 的 叙述 文字 采用 
较 暗 、 较 深 的 颜色 来 呈现 ,如 黑色 .墨绿 色 、 暗 褐色 , 超 链 接 文字 则 以 较 鲜 明 抢眼 的 色彩 来 强 








5. 在 网 页 文件 里 提供 必要 的 链接 


将 篇 幅 过 长 的 文件 分 隔 成 数 篇 较 小 的 网 页 页 面 会 大 大 增加 界面 的 亲 和 性 ,但 在 导航 按 
钮 与 超 链接 的 配置 上 ,网 页 页 面 设计 者 则 要 更 细心 周全 地 安排 ,使 得 浏览 者 不 论 身 处 哪个 页 
面 ,都 能 够 快速 准确 地 找到 其 他 任何 一 个 页 面 。 

网 页 页 面 设计 者 应 特别 提供 “上 一 页 ”“ 下 一 页 ”“ 跳 到 子 目录 页 ”与 “返回 首页 ”等 之 类 
的 导航 按钮 或 超 链接 。 


6. 在 较 长 的 网 页 页 面 内 提供 目录 表 与 大 标题 


理想 的 网 页 页 面 长 度 以 不 超过 3、4 个 屏幕 页 面 为 佳 。 但 是 如 果 基 于 某 些 特殊 理由 ,网 页 
页 面 一 定 要 做 得 很 长 ,那么 不 要 忘 了 在 此 长 篇 的 网 页 页 面 最 上 头 ,提供 一 个 目录 表 , 网 页 页 
面 的 内 容 也 标 上 大 小 标题 ,以 便 清楚 阅读 。 尤 其 重要 的 是 ,在 这 些 标题 与 目录 表 里 分 别 设置 
锚 点 ,以 使 网 页 页 面 真正 发 扬 互 动 性 、 便 捷 性 的 功能 。 


21.2.3 网 站 框架 规范 


网 站 要 具备 下 列 框架 规范 。 
1. 网 站 介绍 


@ 背景 介绍 。 
e@ 栏目 介绍 (提供 链接 ) 。 


2. 站 点 地 图 
结构 图 (提供 链接 ) 。 
3. 站 点 联系 方式 


e 网 站 管理 的 E-mail 地 址 (根据 需要 加 入 其 他 职能 负责 人 的 E-mail)。 
。 通信 地 址 .联系 人 、 传 真 .电话 号 码 等 。 


4. 反馈 表 


反馈 表 应 该 包括 下 面 几 项 内 容 : 
姓名 ; 
年 龄 ; 
e 职业 ; 


. 
长 
廊 


@ 联系 方式 ; 
@ 意见 建议 。 
根据 实际 就 以 上 各 项 作 调整 ,力求 简洁 有 效 。 


5. 内 容 及 栏目 设置 要 求 


e 在 每 页 中 都 要 包含 相关 的 .引人入胜 的 内 容 。 特 别 是 要 销售 一 种 产品 的 时 候 ,每 个 
页 面 都 要 用 详细 的 内 容 和 图 像 精 心 修饰 一 番 。 

e ”网 页 上 的 语言 尽量 通俗 易 懂 。 

e ”用 符号 突出 特别 重要 的 内 容 ,不 要 过 多 ,保持 页 面 的 简洁 。 

e 不 要 把 站 点 建成 单纯 的 网 上 公司 介绍 ,适当 发 布 行 业 信息 。 


6. 常见 问题 解答 

@ 将 所 有 问题 列 于 页 面 的 上 部 ,并 将 每 个 问题 与 答案 链接 在 一 起 。 

@ 对 专业 用 语 及 技术 术语 进行 解释 。 

e 回答 共性 问题 节省 网 管 和 访问 者 的 时 间 和 精力 。 

7. 搜索 工具 

e 在 搜索 框 中 输入 关键 词语 或 词组 ,在 单 击 查寻 按钮 后 ,本 站 相关 的 网 页 列表 就 会 出 
现在 屏幕 中 。 

e@ 有效 查 寻 的 说 明 。 

8. 新 闻 


e 在 最 新 更 新 的 信息 边 加 注 一 个 亮丽 的 小 图 标 * 新 ”。 由 

e 为 最 新 消息 创建 单独 页 面 , 并 在 一 段 时 间 后 将 新 闻 放 置 于 适当 的 目录 下 。 a 

e 在 主页 或 每 个 页 面 下 加 注 一 行文 字 , 表 明 本 站 点 或 每 个 单独 的 页 面 最 近 一 次 被 更 新 
的 时 间 。 

e 提供 其 他 网 站 链接 ,以 提供 更 多 相关 信息 。 


9. 相 关 站 点 链接 


。 每 个 链接 作 简要 说 明 ,并 对 它 被 链接 的 原因 进行 阐述 。 
。 每 周 对 各 链接 站 点 作 定期 的 访问 ,删除 那些 死 链 接站 点 。 . 
。 为 站 点 创建 纯 文本 的 版 本 。 @ 
10. VI 标准 化 要 求 


® LOGO 及 中 英文 标准 字体 (包括 应 用 范例 ) 。 
ee 网 站 标准 色 ( 包 含 扩 展 范例 ) 。 
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e 链接 图 标 ( 尺 寸 :88X3lpx/468X60px) 各 两 个 (包括 应 用 范例 )。 
11. 网 站 建设 尺寸 规范 


e@ 页 面 标准 按 800X600 分 辨 率 制作 ,实际 尺寸 为 780 X430px。 

ee ”页面 长 度 原则 上 不 超过 3 屏 ,宽度 不 超过 1 屏 。 

e 每 个 标准 页 面 为 A4 幅面 大 小 . 即 8. 5X11 英寸 。 

@ 全 尺寸 Banner 为 468X60px, 半 尺寸 Banner 为 234X60px, 小 Banner 为 88 X31lpx。 
@ 另外 120X90px、120X60px 也 是 小 图 标的 标准 尺寸 。 

ee 每 个 非 首页 静态 页 面 含 图 片 字 节 不 超过 60KB, 全 尺寸 Banner 不 超过 14KB。 


12. 用 户 反馈 表 
网 站 中 应 该 有 用 户 反馈 表 , 而 且 内 容 要 详细 。 


21.3 网 站 目录 和 文件 规范 


在 网 站 开发 中 ,目录 和 文件 命名 是 有 讲究 的 。 好 的 文件 名 应 具有 通用 性 , 即 一 个 工作 小 
组 的 成 员 都 能 够 方便 地 理解 每 一 个 文件 的 意义 ,其 次 当 在 文件 夹 中 按 名 称 排序 时 ,相同 类 别 
的 文件 可 以 排列 在 一 起 ,以 便 进行 查找 、 修 改 或 替换 。 


21.3.1 建立 目录 的 原则 


建立 目录 的 原则 是 以 最 少 的 层次 提供 最 清晰 简便 的 访问 结构 。 

一 般 网 站 根 目录 中 可 以 建立 images common ,temp 三 个 子 目录 ,根据 需要 也 可 以 建立 
media 子 目 录 。 

e images 子 目录 中 存放 不 同 栏目 的 页 面 用 到 的 公共 图 片 ,如 LOGO、Banner、 导 航 菜 

单 、 按 钮 等 。 

e common 子 目录 中 存放 CSS、JS、PHP ,include 等 公共 脚本 文件 。 

@ temp 子 目 录 存 放 客 户 提供 的 各 种 文字 图 片 等 原始 资料 。 

emedia 子 目 录 中 存放 Flash、AVI、QuickTime 等 多 媒体 文件 。 

原则 上 根 目 录 中 应 按照 首页 的 栏目 结构 ,给 每 一 个 栏目 建立 一 个 目录 文件 夹 ,根据 需要 
在 每 一 个 栏目 的 目录 中 建立 一 个 images 和 media 的 子 目录 用 以 放置 此 栏目 专 有 的 图 片 和 多 
媒体 文件 ,如 果 这 个 栏目 的 内 容 特别 多 ,又 分 出 很 多 下 级 栏目 .可 以 相应 地 再 建立 其 他 目录 。 

temp 目录 中 的 文件 往往 会 比较 多 ,建议 以 时 间 为 名 称 建立 目录 ,将 客户 陆续 提供 的 资料 
归 类 整理 。 

除非 有 特殊 情况 ,目录 ,文件 的 名 称 全 部 用 小 写 英文 字母 .数字 、 下 划 线 的 组 合 ,其 中 不 
得 包含 汉字 空格 和 特殊 字符 ;目录 的 命名 以 英文 为 主 , 尽 量 不 要 以 拼音 作为 目录 名 称 ,经 验 


证 明 , 用 拼音 命名 的 目录 往往 在 一 个 月 后 连 自己 都 看 不 懂 。 


根 目 录 : 指 DNS 域名 服务 器 指向 的 索引 文件 的 存放 目录 。 

根 目 录 文 件 : 根 目 录 只 允许 存放 index. html(default. html 或 main. html) 首 页 文件 ， 
以 及 其 他 必须 的 系统 文件 。 

每 个 语言 版 本 的 网 页 分 别 存 放 于 独立 的 目录 。 例 如 : 

。 简体 中 文 网 页 存放 在 gb 目录 ; 

。 繁体 中 文 网 页 存放 在 big5 目录 ; 

4 英语 网 页 存放 在 en 目录 ; 

4 日 语 网 页 存放 在 jp 目录 。 

每 个 主要 功能 ( 主 菜单 ) 建 立 一 个 相应 的 独立 目录 。 

根 目录 下 的 images 为 存放 公用 图 片 目录 ,每 个 目录 下 的 私有 图 片 存放 于 各 自 独立 的 
images 目录 。 

所 有 的 JS 文件 存放 在 根 目录 下 的 script 目录 。 

所 有 的 CSS 文件 存放 在 根 目 录 下 的 style 目录 。 

所 有 的 CGI 程序 存放 在 根 目 录 并 列 目录 cgi_bin 目录 。 


21.3.2 网 站 文件 命名 规范 


网 站 文件 命名 应 遵循 如 下 规范 。 


以 英文 命名 。 

以 最 少 的 字母 达到 最 容易 理解 的 意义 ,习惯 上 根据 菜单 名 的 英语 翻译 取 主 要 单词 为 
文件 名 称 ,例如 : 

bd 关于 我 们 :about 

。 信息 反馈 :feed 

4 产品 信息 :product 

文件 名 应 小 写 。 

所 有 文件 名 字母 间 连 线 都 为 下 划 线 。 

图 片 命名 原则 以 图 片 英语 字母 为 名 ,如 网 站 标志 的 图 片 为 logo. gif ,鼠标 感应 效果 图 
片 命名 规范 为 图片 名 十 _ 十 on/off”。 


下 面 以 “新 闻 ”( 包 含 “ 国 内 新 闻 ” 和 “国际 新 闻 ”) 这 个 栏目 来 说 明 HTML 文件 的 命名 原则 。 


在 根 目录 下 开设 news 目录 。 

第 一 条 默认 新 闻 取 名 index. htm。 

所 有 属于 “国内 新 闻 ” 的 新 闻 依次 取 名 为 :chinarn_1. htm .china_2. htm*…… 

所 有 属于 “国际 新 闻 ” 的 新 闻 依次 取 名 为 :internation_1. htminternation_2. htm*…* 
如 果 文 件 的 数量 是 两 位 数 , 请 将 前 9 个 文件 命名 为 china_01. htm、 china _02. 
htm***** :以 保证 所 有 的 文件 能 够 在 文件 夹 中 正确 排序 。 
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本 
A 上 传 站 点 的 方法 与 技巧 
全 管理 站 点 中 的 文件 与 文件 夹 
全 测试 站 点 内 链接 


全 检查 站 点 的 兼容 性 
全 检验 站 点 下 载 速 率 





本 章 要 点 : 
大 型 网 站 一 般 都 由 成 千 上 万 个 网 页 及 其 他 文件 构成 ,合理 地 组 织 这 些 网 页 和 文件 在 网 站 后 
期 维护 中 显得 非常 重 E 善 的 组 织 可 以 提高 站 点 建设 与 维护 效率 。 本 章 首先 介绍 了 如 何 利 用 
Dreamweaver 8 提供 的 站 点 管理 工具 有 效 地 组 织 和 管理 站 点 文件 夹 及 文件 ,建立 本 地 文件 与 远 
程 站 点 之 间 的 映射 关 介绍 利用 【站 点 管理 了 窗口 将 网 页 的 制作 与 编辑 任务 分 配 到 工作 组 
成 员 的 方法 ;最 后 介绍 了 在 上 传 站 点 之 前 ,如 何 测试 站 点 的 完整 性 与 修复 错误 链接 。 
























22.1 上 传 站 点 


至 此 已 经 建立 好 了 一 个 完整 的 站 点 ,下 面 要 做 的 就 是 将 其 上 传 到 Internet 服务 器 上 ,让 
浏览 者 自由 访问 网 页 。Dreamweaver 8 除了 具有 强大 的 网 页 编辑 功能 之 外 ,还 有 相当 实用 的 
站 点 管理 功能 。 利 用 其 内 建 的 专用 FTP 工具 ,只 需 经 过 几 步 简单 的 设置 ,就 能 将 本 地 站 点 上 
传 至 申请 的 远程 服务 器 上 。 


22.1.1 定义 站 点 


上 传 站 点 的 前 提 是 先 定 义 一 个 站 点 。 定 义 站 点 时 可 以 输入 或 更 改 远 程 站 点 的 信息 , 选 
择 包含 站 点 文件 的 本 地 根 文件 夹 , 以 及 设置 存 回 和 取出 选项 等 。 
在 Dreamweaver 8 中 定义 站 点 的 操作 步骤 如 下 。 
(1) 启动 Dreamweaver 8。 选 择 [ 站 点 【管理 站 点 菜单 命令 ,如 图 22. 1 所 示 ,打开 【 管 
理 站 点 ] 对 话 框 ,如 图 22. 2 所 示 。 


新 结 站 点 
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报告 开 ) 

同步 站 点 再 围 ) 

检查 站 点 商用 的 鱼 接 中 CtrltB8 

改变 站 点 范围 的 链接 9) 

A) » 





22.2 理 
图 22.1 选择 [管理 站 点 ] 命 令 图 22.2 【管理 站 点 ] 对 话 框 


| 提示 轩 时 时 时 时 和 时 时 时 时 时 
在 菜单 中 选择 [站 点 管理 】 人 新 建站 点 了 命令 也 可 以 打开 【未 命名 站 点 | 站 点 定义 为 】 对 
话 框 定义 站 点 。 


(2) 单 击 该 对 话 框 中 的 【新 建 ] 按 钮 ,在 弹出 的 下 拉 选 项 中 选择 站 点 管理 选项 ,如 图 22. 2 
所 示 ,新 定义 一 个 站 点 ;或 者 选 定 一 个 已 存在 的 站 点 ,然后 单 击 【编辑 了 按钮 进行 编 

辑 。 打 开 【[ 站 点 定义 为 ] 对 话 框 ,切换 到 【高 级 了 选项 卡 , 对 话 框 显示 如 图 22. 3 所 示 。 
本 

在 【站 点 定义 为 3 对 话 框 中 包括 两 个 选项 卡 , 它 们 的 功能 基本 相同 ,【 基 本 】 选 项 卡 提 供 了 

向 导 的 方式 帮助 用 户 快速 定义 一 个 基本 的 站 点 攻 高 级 了 选项 卡 则 详细 列 出 了 定义 站 点 内 容 。 
(3) 在 【站 点 定义 为 了 对 话 框 中 的 【分 类 列表 框 中 选择 【本 地 信息 选项。 在 【站 点 名 称 】 了 
文本 框 中 输入 站 点 名 ,如 “我 的 个 人 站 点 ”。 
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(4) 单 击 【本 地 根 文件 夹 ] 文 本 框 旁边 的 文件 夹 图 标 按钮 ,浏览 并 选 定 一 个 本 地 站 点 文 
件 夹 .【 默 认 图 像 文件 夹 ] 文 本 框 中 可 以 设置 网 站 中 所 用 到 的 图 像 的 默认 位 置 。 
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图 22.3 【本 地 信息 选项 组 


(5) 在 [HTTP 地 址 文本 框 中 输入 站 点 地 址 ,如 http://www. personal. com. cn。 如 果 
没有 申请 域名 ,可 以 先 空 着 ,等 申请 之 后 再 填写 。 








(6) 选中 [启用 缓存 ] 复 选 框 ,可 以 加 快 链接 更 新 的 速度 。 
(7) 在 【分 类 列表 框 中 选择 【远程 信息 选项 ,显示 【远程 信息 选项 组 ,如 图 22.4 所 示 。 


【访问 】 下 拉 列 表 框 中 有 6 个 选项 ,各 选项 的 含义 如 下 。 

e 无 :表示 不 上 传 网 页 文件 。 

FTP: 表 示 以 FTP 传输 方式 将 网 页 文件 上 传 到 远程 服务 器 站 点 。 

本 地 /网 络 : 表 示 将 文件 传送 到 本 地 计算 机 或 局 域 网 的 共享 文件 夹 中 。 

RDS: 使 用 远程 发 展 服务 器 进行 资源 管理 。 

SourceSafe 数据 库 : 表 示 利 用 Dreamweaver 8 将 网 页 与 SourceSafe 数据 库 进行 . 

链接 ,以 使 浏览 者 能 访问 该 数据 库 。 : 
@ WebDAV: 使 用 Dreamweaver 8 连接 到 WebDAYV 服务 器 。 

(8) 从 [访问 J 下 拉 列 表 中 选择 FTP 选项 ,弹出 如 图 22. 5 所 示 的 【远程 信息 3 选项 组 。 














EC 下 已- 
图 22. 4 【远程 信息 3 选项 组 














图 22.5 设置 FTP 选 项 


(9) 在 [FTP 主机 】 文 本 框 中 输入 上 传 站 点 的 主机 地 址 或 IP 地 址 ,在 地 址 前 不 要 加 
ftp:// ,例如 输入 ftp. personal. com. cn 。 

(10) 在 【登录 】 文 本 框 中 输入 申请 远程 站 点 空间 的 FTP 账号。 

(11) 在 [密码 ] 本 框 中 输入 申请 远程 站 点 服务 器 空间 时 所 分 配 的 FTP 上 传 密码 。 

(12) 选中 [使 用 防火 墙 ] 复 选 框 。 

(13) 在 [ 存 回 和 取出 3 选项 组 中 选中 [启用 存 回 和 取出 ] 复 选 框 。 
如 果 是 一 组 设计 人 员 合 作 进 行 网 页 设计 ,还 要 选中 [启用 存 回 和 取出 ] 复 选 框 ;如 
果 想 在 [文件 7 面板 中 双击 文件 以 打开 文件 时 自动 检验 文件 ,就 要 选中 [打开 文件 
之 前 取出 ] 复 选 框 。 不 过 只 有 当选 中 了 【启用 存 回 和 取出 ] 复 选 框 后 ,才能 选中 [ 打 
开 文 件 之 前 取出 ] 复 选 框 。 选 中 以 上 复 选 框 后 ,需要 在 【取出 名 称 ] 文 本 框 中 输入 
用 户 名 ,在 [电子 邮件 地 址 了 文本 框 中 输入 用 户 的 电子 邮件 地 址 。 有 关 【 存 回 和 取 
出 了 的 更 多 知识 ,请 参考 22. 1. 3 节 。 

(14) 设置 [ 存 回 和 取出 3 选项 组 后 , 单 击 [确定 按钮 ,弹出 如 图 22. 6 所 示 的 对 话 框 ,表示 
正在 扫描 站 点 内 的 所 有 文件 。 

(15) 更 新 完 站 点 内 的 所 有 文件 并 创建 站 点 缓存 后 ,弹出 【管理 站 点 了 对 话 框 ,如 图 22.7 











正在 更 新 站 点 短 存 











已 扫描 78/209 | 
/Adnin/ adnin_index. asp 1 




















图 22.6 扫描 站 点 内 的 所 有 文件 图 22.7 【管理 站 点 ] 对 话 框 


(16) 在 图 22.7 所 示 对 话 框 的 列表 框 中 显示 “我 的 站 点 ”的 站 点 名 称 。 单 击 【 完 成 按钮 ， 
完成 站 点 定义 。 

(17) 选择 [窗口 3I【 文 件 ] 命 令 .打开 [文件 面板。 单 击 【文件 3 面板 上 的 【扩展 / 折 秋 ] 按 
钮 时 ,切换 到 [站 点 管理 窗口 .如 图 22. 8 所 示 。 


ETILEEAIIE 





普通 编辑 窗口 【站 点 管理 ] 窗 口 
图 22.8 切换 到 [站 点 管理 ] 窗 口 


2 二 2 上 传 文件 


定义 站 点 后 ,切换 到 [站 点 管理 窗口, 如 图 22. 8 右 图 所 示 。 默 认 状 态 下 , 左 侧 窗 口 为 远 
程 站 点 文件 显示 与 管理 区 , 右 侧 窗口 显示 了 本 地 站 点 的 网 页 文件 。 
完成 站 点 定义 工作 后 ,就 可 以 上 传 站 点 了 ,具体 操作 步骤 如 下 。 
(1) 单 击 [ 站 点 管理 ] 徐 口上 方 的 连接 远程 站 点 按钮 器 ,如 图 22. 9 所 示 。 当 该 按钮 上 的 
指示 灯 变 为 绿灯 ,同时 不 连接 器 也 变 为 连接 涩 时 ,就 表示 连接 上 了 远程 站 点 。 











me ， 一 


图 22.9 用 于 上 传 站 点 的 【站 点 管理 ] 窗 口上 的 按钮 


在 【站 点 管理 了 窗口 顶部 显示 一 排 工 具 按钮 ,各 按钮 的 含义 如 下 。 

e 站 点 文件 按钮 [ 哇 :该 按钮 用 于 显示 远程 或 本 地 站 点 在 【站 点 管理 ] 人 窗口 可 变 区 域 
中 的 文件 结构 。 它 是 [站 点 管理 窗口 的 默认 视图 。 

e 站 点 地 图 按钮 晤 . :该 按钮 用 于 显示 文件 之 间 的 链接 ,在 【站 点 管理 窗口 的 可 变 区 
域 中 显示 可 视 化 的 文档 结构 图 。 

”连接 到 远程 主机 / 断 开 与 远程 主机 的 连接 按钮 器 /部 :只 有 在 [站 点 定义 为 3 对话 
框 的 [远程 信息 3 选项 组 中 选中 FTP 传输 方式 后 【连接 到 远程 主机 3 按钮 才 可 用 。 
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当 【 连 接 到 远程 主机 按钮 上 的 指示 灯 变 为 绿灯 时 ,【 连 接 到 远程 主机 按钮 也 变 
为 【 断 开 与 远程 主机 的 连接 按钮 ,表示 已 经 成 功 连 上 远程 站 点 ,可 以 开始 上 传 
了 。 此 时 再 单 击 该 按钮 , 便 中 断 连接 。 默 认 状 态 下 ,如 果 闲 置 30 分 钟 以 上 ， 
Dreamweaver 8 就 会 自动 切断 与 远程 站 点 的 连接 。 

e 刷新 按钮 C :该 按钮 用 于 刷新 本 地 和 远程 目录 列表 。 如 果 在 【站 点 定义 为 〗 对 话 
框 中 没有 选中 [自动 刷新 本 地 文件 列表 】 复 选 框 (参见 图 22. 3) ,或 【自动 刷新 远程 
文件 列表 ] 复 选 框 (只 有 在 【远程 信息 】 选 项 的 【访问 J 下拉 列表 中 选择 【本 地 /网 
络 】 选 项 后 ,该 复 选 框 才 可 用 ) ,就 能 使 用 [刷新 3 按钮 手工 刷新 目录 列表 。 

@ 读 取 文 件 按钮 号 :该 按钮 用 于 将 选 定 的 文件 从 远程 站 点 复制 到 本 地 站 点 。 如 果 
在 [站 点 定义 为 7 对话 框 的 【远程 信息 3 分 类 中 选中 了 【 存 回 和 取出 选项 组 中 的 
【启用 存 回 和 取出 ] 复 选 框 , 则 本 地 站 点 的 备份 文件 为 只 读 文件 ,而 远程 站 点 上 的 
文件 仍然 可 以 被 设计 小 组 中 的 其 他 成 员 取 出 编辑 。 如 果 没 有 选中 [ 存 回 和 取出 】 
选项 组 中 的 [启用 存 回 和 取出 了 复 选 框 , 则 备份 文件 既 可 以 读 也 可 以 写 。 








复制 的 文件 是 [站 点 管理 窗口 当前 激活 区 (远程 站 点 窗口 区 或 本 地 站 点 窗口 区 ) 中 所 
选 定 的 文件 。 如 果 激 活 远程 站 点 窗口 区 ,就 将 选 定 的 文件 复制 到 本 地 站 点 ;如 果 激 活 本 地 
站 点 窗口 区 ,就 将 选 定 的 本 地 文件 的 远程 站 点 上 的 版 本 复制 到 本 地 站 点 。 


e@ 上传 文件 按钮 会 :该 按钮 用 于 将 本 地 站 点 上 选 定 的 文件 复制 到 远程 站 点 。 复 制 
的 文件 是 【站 点 管理 窗口 当前 激活 区 (远程 站 点 窗口 区 或 本 地 站 点 窗口 区 ) 中 
所 选 定 的 文件 。 如 果 激 活 本 地 站 点 窗口 区 ,就 将 选 定 的 文件 复制 到 远程 站 点 ; 
如 果 激 活 的 是 远程 站 点 窗口 区 ,就 将 选 定 的 远程 站 点 上 的 文件 的 本 地 版 本 复制 
到 远程 站 点 。 
e ”取出 按钮 外 .该 按钮 用 于 将 远程 服务 器 上 的 文件 复制 并 传送 到 本 地 站 点 (如 果 
本 地 站 点 存在 被 复制 的 文件 ,就 将 该 文件 覆盖 ) ,同时 将 服务 器 上 的 这 些 文件 锁 
定 。 只 有 选中 了 【 存 回 和 取出 3 选项 组 中 的 [启用 存 回 和 取出 ] 复 选 框 之 后 ,才能 
使 用 该 按钮 。 
e 存 回 按钮 竖 : 单 击 该 按钮 ,可 将 本 地 站 点 的 文件 复制 并 传送 到 远程 服务 器 上 ,并 
且 使 这 些 文件 也 可 以 被 小 组 中 的 其 他 成 员 编 辑 修改 ,本 地 站 点 中 的 文件 变 为 只 
读 文 件 。 只 有 选中 了 [ 存 回 和 取出 3 选项 组 中 的 【启用 存 回 和 取出 了 复 选 框 之 后 ， 
才能 使 用 该 按钮 。 
(2) 选 定 要 上 传 的 文件 ,如 图 22. 10 所 示 。 
在 选 定 上 传 的 文件 时 ,可 以 借助 键盘 的 辅助 键 , 如 Ctrl 键 和 Shift 键 ,协助 选中 多 个 
文件 , 按 下 Ctrl 十 A 组 合 键 选中 全 部 文件 。 
(3) 单 击 [ 上 传 文件 按钮 会 .上 传 网 页 文件 。 
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(4) 此 时 将 弹出 [相关 文件 ] 对 话 框 ,询问 是 否 包 含 从 属 文件 。 单 击 【 是 ] 按 钮 ,包含 从 属 
交 件 。 
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开始 上 传 站 点 文件 ,上 传 结束 后 ,在 [站 点 管理 ] 窗 口 的 [ 远 端 站 点 3( 即 窗口 左边 的 区 域 ) 
显示 出 远程 站 点 文件 ,如 图 22. 11 所 示 。 





图 22.11 上 传 网 页 文件 到 远程 站 点 


22.1.3 存 回 和 取出 功能 介绍 


在 22.1.1 节 中 介绍 定义 站 点 时 ,在 步骤 (13) 中 简单 介绍 了 [ 存 回 和 取出 选项 组 的 设置 ， 
22. 1. 2 节 中 也 介绍 了 【 存 回 3 按钮 和 [取出 2 按钮 的 含义 ,它们 可 用 来 设置 网 页 文件 的 编辑 权限 。 

存 回 和 取出 功能 是 Dreamweaver 8 中 一 项 非常 重要 的 功能 。 因 为 当 一 组 设计 人 员 合 作 @ 
进行 网 页 设计 时 ,经 常会 发 生 多 人 同时 修改 同一 个 文件 ,而 谁 也 不 知道 哪 一 个 文件 才 是 正确 
的 文件 的 混乱 状况 。 此 时 ,只 要 应 用 Dreamweaver 8 的 存 回 和 取出 功能 , 即 可 有 效 地 控制 文 
件 的 修改 权限 ,进而 维持 整个 站 点 的 正常 运作 与 最 新 状态 。 

存 回 : 当 文 件 设置 为 [ 存 回 】 后 ,该 文件 就 可 被 他 人 编辑 。 





463 





取出 : 当 文 件 设置 为 【取出 3 后 ,别人 就 只 能 读 该 文件 ,而 不 能 进行 写 操作 。 
默认 情况 下 ,Dreamweaver 8 不 预 设 存 回 和 取出 功能 ,用 户 必须 自己 设置 以 利用 该 项 功 
能 ,这 在 22.1.1 节 中 已 介绍 过 。 

如 果 在 【站 点 定义 为 ] 对 话 框 的 [ 存 回 和 取出 选项 组 中 选中 了 【启动 存 回 和 取出 ] 复 选 框 , 则 
在 [站 点 管理 ] 窗 口 的 上 部 就 会 多 出 两 个 按钮 一 【 存 回 ] 按 钮 台 和 [取出 3 按钮 色 ,表示 可 以 启 
用 [ 存 回 和 取出 3 功能。 选中 文件 , 单 击 这 两 个 按钮 ,就 可 将 文件 设置 为 [ 存 回 或 [取出 】。 

在 图 22. 12 左 侧 子 窗口 中 ,前 两 个 文件 旁 带 有 绿色 的 复 选 标记 V , 右 侧 的 子 窗口 中 ,有 些 文件 
旁边 带 有 一 个 锁 形 标记 a ,有 时 在 左 侧 子 窗口 中 出 现 红 色 的 复 选 标 记 V ,这 3 种 标记 的 含义 如 下 。 

e 红色 的 V :表示 别人 设置 了 取出 功能 的 文件 ,除了 为 该 文件 设置 取出 的 人 外 ,任何 人 

都 无 法 编辑 该 文件 。 

@ 绿色 的 :表示 自己 设置 了 取出 功能 的 文件 ,只 有 自己 可 以 编辑 该 文件 。 

@” 锁 形 标记 a :表示 设置 了 存 回 功能 的 文件 .别人 可 以 编辑 该 文件 。 

把 图 22. 12 中 间 的 分 隔 条 向 右 拖 动 , 扩 大 左 侧 的 【 远 端 站 点 了 子 窗口 ,在 文件 的 右 侧 可 以 
看 到 :编辑 前 两 个 文件 的 是 名 称 为 “zhu" 的 人 员 ,还 可 以 看 出 其 编辑 的 时 间 。 对 于 自己 设置 了 
取出 功能 的 文件 ,网 络 上 的 其 他 协作 设计 人 员 看 到 的 是 红色 的 V ,他们 无 法 编辑 该 文件 。 如 
果 要 让 其 他 人 也 能 进行 编辑 ,只 需 选 中 该 文件 ,再 单 击 【 存 回 ] 按 钮 , 即 可 开放 该 文件 的 下 载 
修改 权限 。 

提示 
“ 存 回 ”表示 文件 编辑 完 后 再 存放 回去 ,让 别人 也 可 以 进行 编辑 ;“ 取 出 ”表示 将 文件 取 
出 来 进行 编辑 ,此 时 别人 不 能 对 它 进行 编辑 。 








提示 
在 默认 状态 下 ,在 本 地 文件 和 远 端 站 点 列表 中 不 会 显示 取出 者 信息 ,可 以 在 【站 点 定 
义 为 〗 对 话 框 的 [文件 视图 列 】 分 类 中 进行 设置 ,具体 操作 如 图 22. 13 所 示 。 
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图 22. 12 存 回 和 取出 功能 示意 图 图 22.13 设置 显示 取出 者 列 信息 





22.1.4 设计 备注 功能 介绍 


22. 1. 1 节 介 绍 定义 站 点 时 ,在 [站 点 定义 为 对 话 框 的 [分 类 ] 列 表 框 中 还 有 一 个 【设计 备 
注 ] 选 项 ,如 图 22. 14 所 示 。 它 用 于 在 网 页 文件 中 插入 设计 备注 。 
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图 22.14 【站 点 定义 为 对 话 框 中 的 【设计 备注 】 分 类 

在 图 22. 14 所 示 的 [设计 备注 3 选项 组 中 ,选中 [维护 设计 备注 ] 复 选 框 ,可 以 让 设计 制作 
人 员 向 网 页 中 添加 设计 备注 ;选中 [上 传 并 共享 设计 备注 ] 复 选 框 ,可 以 上 传 设计 备注 ,以 与 
其 他 设计 人 员 共 享 。 只 有 先 选 中 了 【维护 设计 备注 ] 复 选 框 ,才能 选中 [上 传 并 共享 设计 备 
注 ] 复 选 框 。 

向 网 页 文件 中 添加 设计 备注 的 操作 如 下 。 

(1) 如 图 22. 14 所 示 ,在 【站 点 定义 为 对话 框 中 的 【设计 备注 3 选项 组 中 选中 [维护 设计 
备注 】 和 【上 传 并 共享 设计 备注 】 复 选 框 ,以 便 能 向 网 页 文件 中 添加 设计 备注 。 
在 [站 点 管理 ] 窗 口中 , 选 定 要 添加 设计 备注 的 文件 ,然后 选择 [文件 3I【 设 计 备 注 】 
命令 ,如 图 22. 15 所 示 。 
在 【设计 备注 了 对 话 框 中 ,首先 看 到 的 是 【基本 信息 3 选项 卡 , 如 图 22. 16 所 示 。 


(2 


(3 








i 


图 22.15 选择 [设计 备注 命令 
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| 新 编 网 页 制作 入 门 与 提高 


(4) 从 状态] 下拉 列 表 框 中 选择 一 个 表示 所 选 网 页 文件 目前 工作 状态 的 选项 ,例如 al- 
pha, 它 表示 该 网 页 文件 正 处 于 开发 阶段 。 

(5) 在 [备注 ] 文 本 框 中 输入 设计 备注 ,如 图 22. 16 中 所 示 的 “正在 开发 阶段 ,图 像 有 待 进 
一 步 处 理 ” 文 本 信息 。 

(6) 选中 [文件 打开 时 显示 ] 复 选 框 ,以 便 在 打开 网 页 文件 时 显示 添加 给 它 的 设计 备注 。 

(7) 单 击 【 所 有 信息 标签. 弹出 [所 有 信息 】 选 项 卡 , 如 图 22. 17 所 示 。 选 项 卡 中 显示 了 
该 网 页 文件 所 有 的 设计 备注 。 用 户 也 可 以 在 该 选项 卡 中 自行 编辑 和 设计 备注 。 
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图 22. 16 【基本 信息 ] 选 项 卡 图 22.17 【所 有 信息 选项 卡 


(8) 单 击 [确定 了 按钮 , 即 向 网 页 文件 中 添加 了 设计 备注 。 

在 Dreamweaver 8 里 ,网 页 制作 人 员 可 以 为 每 个 网 页 文件 添加 一 段 设 计 备 注 。 这 项 功 
能 在 一 个 设计 制作 网 页 小 组 的 工作 环境 里 非常 有 用 。 设 计 人 员 可 以 通过 设计 备注 标记 网 页 
文件 的 工作 进度 及 其 他 重要 信息 ,以 提醒 其 他 设计 人 员 ,避免 做 重复 性 工作 ,从 而 提高 效率 。 


22.1.5 上 传 网 页 到 局 域 网 


现在 越 来 越 多 的 公司 都 建 有 自己 的 局 域 网 ,以 后 家 庭 网 络 也 会 逐渐 普及 。 有 时 为 了 交 
流 和 宣传 的 方便 ,可 以 把 制作 好 的 网 页 传送 到 共享 的 计算 机 中 ,让 整个 局 域 网 内 被 赋予 相应 
权限 的 人 员 浏 览 ,使 信息 传递 更 及 时 、 更 有 效 , 方 法 也 更 多 样 化 。 
以 22.1.1 节 中 定义 的 ”我 的 个 人 站 点 ”的 站 点 为 例 ,介绍 如 何 上 传 网 页 到 局 域 网 。 具 体 
操作 步骤 如 下 。 
(1) 在 【站 点 管理 窗口 工具 栏 的 【显示 下 拉 列 表 框 中 ,选择 【管理 站 点 了 选 项, 如 
图 22. 18 所 示 ;或 者 选择 【站 点 了 人 民 管 理 站 点 了 命令 ,打开 【管理 站 点 了 对 话 框 , 如 
图 22. 19 所 示 。 
(2) 在 [管理 站 点 3 对 话 框 中 选择 名 称 为 “我 的 个 人 站 点 ”的 站 点 ,然后 单 击 【 编 辑 ] 按 钮 ， 
打开 [站 点 定义 为 对 话 框 。 
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图 22.18 选择 [管理 站 点 ] 选 项 图 22. 19 【管理 站 点 对话 框 


(3) 在 该 对 话 框 的 [分 类 了 列表 框 中 选择 【远程 信息 3 选项 ,显示 【远程 信息 3 设置 选项 ,如 
图 22. 20 所 示 。 














图 22. 20 【站 点 定义 为 ] 对 话 框 中 的 【远程 信息 】 选 项 组 


(4) 从 【访问 】 下 拉 列 表 框 中 选择 [本 地 /网 络 】 选 项 。 

(5) 单 击 【远程 文件 夹 】 文 本 框 旁边 的 按钮 ,浏览 并 选 定 上 传 网 页 到 局 域 网 站 点 的 文 
件 夹 。 

(6) 选中 自动 刷新 远程 文件 列表 了 复 选 框 , 以 自动 刷新 远程 站 点 文件 列表 。 

(7) 保持 其 他 选项 不 变 , 单 击 [ 确 定 ] 按 钮 , 回 到 [管理 站 点 3 对 话 框 。 @ 

(8) 在 该 对 话 框 中 , 单 击 【完成 ] 按 钮 ,完成 设置 .如 图 22. 21 所 示 。 

(9) 回 到 [站 点 管理 窗口 . 单 击 [ 上 传 文件 按钮 会 ,如 图 22. 22 所 示 , 上 传 网 页 到 局 域 网。 
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图 22.21 【管理 站 点 ] 对 话 框 图 22.22 单 击 [ 上 传 文件 3 按钮 上 传 网 页 


上 传 网 页 到 局 域 网 时 【连接 到 远程 主机 按钮 器/【 断 开 与 远程 主机 的 连接 】 尖 按 
钮 不 可 用 ,直接 单 击 【[ 上 传 文件 3 按钮 就 可 以 开始 上 传 了 。 
(10) 此 时 将 弹出 [相关 文件 ] 对 话 框 , 询 问 是 否 包 含 从 属 文件 。 单 击 【 是 了 按钮 ,包含 从 
属 文件 。 
现在 就 开始 上 传 网 页 文件 了 。 传 送 完毕 后 ,弹出 如 图 22. 23 所 示 的 [站 点 管理 ] 徐 口 。 
这 样 ,网 页 文件 就 上 传 到 了 局 域 网 中 指定 的 共享 文件 夹 中 了 。 有 访问 该 共享 文件 夹 权 
限 的 成 员 , 都 可 以 容易 地 浏览 到 该 站 点 所 包含 的 全 部 网 页 。 


x 2004 - [无 标 是 文档 (Untitled-1)] 














图 22. 23 上 传 网 页 到 局 域 网 后 的 [站 点 管理 ] 窗 口 





22.2 管理 站 点 


上 传 站 点 之 后 ,就 要 对 站 点 进行 维护 与 管理 了 。 站 点 管理 不 像 上 传 站 点 那样 一 下 子 就 
能 完成 , 它 涉及 到 站 点 文件 的 方方面面 ,是 一 个 长 期 而 繁琐 的 过 程 , 专 业 站 点 管理 人 员 几 乎 
每 天 都 要 去 做 这 些 工 作 。 幸 好 Dreamweaver 8 提供 了 许多 优秀 的 管理 与 维护 站 点 的 功能 ， 
从 而 使 用 户 方便 地 进行 站 点 维护 与 管理 。 


22.2.1 站 点 文件 管理 


在 制作 网 页 文件 时 ,总 是 将 所 有 的 网 页 文件 都 存放 在 同一 个 文件 夹 下 ,该 文件 夹 下 包含 
一 个 站 点 中 所 有 的 文件 夹 和 文件 。 由 于 在 [站 点 管理 ] 窗 口 的 本 地 站 点 文档 窗口 区 中 显示 了 
所 有 的 网 页 文件 和 文件 夹 ,所 以 在 该 区 域 中 可 以 很 方便 地 对 文件 进行 管理 。 


1. 添加 文件 


任何 站 点 的 建立 都 不 可 能 一 步 到 位 。 站 点 建 好 后 , 随 着 业务 量 的 不 断 扩大 ,站 点 中 需 包 
含 的 信息 也 会 越 来 越 多 。 单 纯 依 靠 原 有 的 文件 无 法 较 好 地 组 织 这 些 信息 ,这 时 就 需要 向 站 
点 中 添加 文件 或 文件 夹 以 容纳 这 些 信息 。 其 操作 步骤 如 下 。 

(1) 在 【站 点 管理 了 窗口 的 本 地 文件 ] 窗 格 中 选中 要 添加 文件 的 文件 夹 , 并 选择 [文件 了 

【新 建文 件 ] 命 令 , 如 图 22. 24 所 示 。 也 可 以 右 击 该 文件 夹 ,从 弹出 的 快捷 菜单 中 选 
择 [ 新 建文 件 ] 命 令 。 





[二 
[了 








图 22.24 在 【站 点 管理 ] 窗 口中 新 建文 件 


(2) 在 选中 的 文件 夹 下 出 现 一 个 新 文件 ,其 默认 文件 名 处 于 可 修改 状态 ,如 图 22. 25 所 示 。 
(3) 输入 新 建文 件 的 文件 名 ,如 tool. htm。 
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re 其 后 一 定 要 带 有 网 页 文件 的 扩展 名 ,如 htm、html 或 asp 等 。 


这 样 就 向 站 点 中 添加 了 网 页 文件 。 双 击 该 新 建 的 文件 ,就 会 在 Dreamweaver 8 文档 窗 
口中 打开 该 文件 ,并 可 以 向 其 中 添加 内 容 。 同 样 对 于 已 存在 的 文件 ,也 可 以 双击 将 其 打开 进 
行 编辑 。 新 建文 件 夹 的 方法 与 新 建文 件 的 方法 类 似 , 只 是 在 步骤 (1) 中 选择 【文件 ] 代 新 建文 
件 夹 命令 ,其 余 操 作 与 新 建文 件 的 操作 相同 。 
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图 22.25 新 建文 件 


2. 删除 文件 


有 时 , 随 着 站 点 内 容 的 逐步 更 新 ,有 些 网 页 文件 成 了 多 余 的 文件 ,这 时 就 可 视 情 况 将 其 
删除 。 删 除 网 页 文件 的 方法 很 简单 。 下 面 就 以 刚才 新 建 的 tool. htm 文件 为 例 ,介绍 删除 文 
件 的 操作 方法 。 

(1) 选中 要 删除 的 文件 ,如 tool. htm ,然后 选择 【文件 了 民 删 除了 命令 ,或 右 击 并 在 弹出 的 

快捷 菜单 中 选择 [编辑 [删除] 命令 即 可 ,如 图 22. 26 所 示 。 
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图 22.26 删除 文件 
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(2) 弹出 如 图 22. 27 所 示 的 提示 对 话 框 , 询 问 用 户 是 否 确实 要 删除 所 选 文件 。 单 击 【 确 
定 ] 按 钮 ,删除 所 选 文件 ; 单 击 [ 取 消 ] 按 钮 , 则 取消 删除 操作 。 
删除 文件 的 最 简单 的 方法 是 : 选 定 要 删除 的 文件 后 , 按 Delete 键 ,然后 在 弹出 的 对 话 框 
中 单 击 【确定 了 按钮 即 可 将 其 删除 。 如 果 要 删除 某 个 文件 夹 下 的 全 部 文件 ,只 需 选 中 该 文件 
夹 , 然 后 按照 删除 文件 的 方法 操作 即 可 。 
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图 22.27 提示 对 话 框 


如 果 要 一 次 删除 多 个 文件 或 文件 夹 , 可 以 在 单 击 文件 时 按 下 Ctrl 键 或 Shift 键 协 助 选 
中 多 个 文件 。 按 住 Shift 键 ,可 连续 选中 多 个 文件 ; 按 住 Ctrl 键 ,可 以 选中 不 连续 的 多 个 文 
件 。 选 定 文件 后 ,再 按 Delete 键 即 可 删除 。 





3. 重 命名 文件 

在 站 点 维护 过 程 中 ,站 点 管理 员 有 时 为 了 让 网 页 文件 的 名 称 更 具有 说 明 意 义 , 或 更 能 反 
映 出 网 页 内 容 的 变化 ,就 需要 对 文件 重 命名 ,具体 操作 步骤 如 下 。 

(1) 选 定 要 重 命名 的 文件 ,并 选择 [文件 JI【 重 命名 J 命令 ,如 图 22. 28 所 示 。 
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图 22.28 重 命名 文件 


(2) 选 定 的 文件 名 呈 待 修改 状态 ,直接 输入 新 名 称 即 可 ,如 图 22. 29 所 示 。 




















22. 2.2 远程 与 本 地 站 点 同步 


第 一 次 上 传 站 点 之 后 ,如 无 意外 ,远程 与 本 机 的 网 页 文件 应 该 是 一 样 的 。 但 由 于 站 点 内 
容 也 许 不 只 由 一 个 人 编辑 和 维护 ,这 样 就 容易 造成 两 处 文件 不 一 样 的 情况 。 即 使 是 完全 由 
自己 编辑 和 维护 的 网 页 ,在 过 了 一 段 时 间 之 后 ,也 可 能 会 由 于 网 页 制作 人 自己 的 疏忽 ,将 本 
不 该 删 去 的 网 页 删 掉 ,而 由 于 文件 众多 ,难以 一 一 进行 核对 。 这 时 就 可 用 Dreamweaver 8 的 
站 点 同步 功能 进行 修正 。 它 能 使 远程 文件 和 本 机 的 文件 完全 相同 ,方便 地 进行 站 点 内 容 更 
新 ,其 操作 如 下 。 

(1) 在 上 传 站 点 后 ,选择 【站 点 了 民 同 步 ] 命 令 . 如 图 22. 30 所 示 。 








图 22.30 ”选择 [同步 ] 命 令 


(2) 在 弹出 的 [同步 文件 ] 对 话 框 中 ,从 【同步 J 下拉 列表 框 中 选择 [整个 “我 的 个 人 站 点 ” 
站 点 3 选项 ,以 对 整个 站 点 进行 同步 ,如 图 22. 31 所 示 。 
如 果 选 择 [ 仅 选中 的 本 地 文件 选项 , 则 表示 只 同步 选 定 远程 站 点 文件 。 

















图 22.31 【同步 文件 ] 对 话 框 


(3) 从 【方向 】 下 拉 列 表 框 中 选择 【放置 较 新 的 文件 到 远程 】 选 项 ,将 更 新 的 文件 复制 到 
远程 站 点 。 
【方向 J 下 拉 列 表 框 中 的 3 个 选项 的 含义 如 下 。 
@ ”放置 较 新 的 文件 到 远程 :将 更 新 一 些 的 文件 复制 到 远程 站 点 。 
@ ”从 远程 获得 较 新 的 文件 :将 更 新 一 些 的 文件 从 远程 站 点 复制 到 本 地 站 点 。 
ee 获得 和 放置 较 新 的 文件 :将 本 地 站 点 上 更 新 一 些 的 文件 复制 到 远程 站 点 ,同时 

将 远程 站 点 上 更 新 一 些 的 文件 复制 到 本 地 站 点 。 

(4) 选中 [删除 本 地 驱动 器 上 没有 的 远程 文件 】 复 选 框 ,表示 已 将 本 地 站 点 上 不 存在 的 
远程 站 点 上 的 文件 删除 。 然 后 单 击 【预览 ] 按 钮 。 

(5) 弹出 [同步 3 对 话 框 ,如 图 22. 32 所 示 , 对 话 框 中 显示 已 同步 的 文件 。 





回 显示 所 有 文件 
要 更 8 动作 ， 请 志 择 文件 并 单 击 下 方 的 其 中 一 个 图 标 ， 类 后 单 二 “确定 ” 


39)me)9 a CD Cm 
图 22.32 已 同步 的 [同步 ] 对 话 框 




















(6) 如 果 要 上 传 文件 则 会 显示 如 图 22. 33 所 示 的 对 话 框 。 最 后 单 击 【关闭 了 按钮 关闭 该 
对 话 框 。 





要 更 以 动 作 ， 请 选 摊 文件 并 单 击 下 方 的 丰 中 一 个 图 标 ， 朴 后 单 击 “ 确 定 ”。 
8)f¢]g9)g) a Cj] Cw 

















图 22.33 上 传 信息 的 [同步 ] 对 话 框 
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新 编 网 页 制作 入 门 与 提高 


至 此 ,远程 与 本 机 文件 的 同步 就 完成 了 。 采 用 Dreamweaver 8 的 同步 功能 更 新 站 点 文 
件 非常 方便 ,并 且 准 确 无 误 。 用 户 还 可 以 在 图 22. 31 所 示 的 【同步 文件 ] 对 话 框 中 选择 其 他 选 
项 ,以 实现 相应 的 功能 。 





22. 2.3 ”检查 与 修正 超级 链接 


1. 检查 超级 链接 


通常 一 个 站 点 制作 下 来 ,超级 链接 的 项 目 非 常 多 ,对 于 大 型 站 点 来 说 更 是 如 此 。 逐 一 检 
查 , 不 仅 效率 低 ,还 容易 出 错 。 利 用 Dreamweaver 8 所 提供 的 检查 超级 链接 工具 ,可 以 在 极 
短 的 时 间 内 了 解 站 点 内 所 有 超级 链接 的 状态 ,具体 操作 步骤 如 下 。 

(1) 在 【站 点 管理 了 窗口 中 ,选择 [站 点 了 民 检 查 站 点 范围 的 链接 了 命令 ,如 图 22. 34 所 示 。 














图 22.34 选择 [检查 站 点 范围 的 链接 ] 命 令 


(2) 检查 超级 链接 并 弹出 [链接 检查 器 3 面板 ,如 图 22. 35 所 示 。 在 该 面板 的 下 半 部 分 显 
示 了 有 关 文 件 和 链接 情况 的 统计 。 
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图 22. 35 【链接 检查 器 ] 面 板 


(3) 从 【显示 了 下拉 列表 框 中 选择 一 个 选项 ,在 面板 下 半 部 分 就 会 显示 该 选项 的 所 有 文 
件 和 链接 情况 。 
【显示 JTF 拉 列表 框 中 的 3 个 选项 的 含义 如 下 。 
e。 断 掉 的 链接 :检查 文档 中 是 否 存在 断 开 的 链接 ,这 是 默认 选项 。 
e 外 部 链接 :检查 站 点 的 外 部 链接 是 否 有 效 。 
”孤立 的 文件 :检查 站 点 中 是 否 存 在 无 链接 的 、 孤 立 的 文件 。 所 谓 孤 立 的 文件 就 
是 没有 任何 链接 引用 的 文件 。 该 选项 只 有 在 检查 整个 站 点 的 链接 的 操作 中 才 
有 效 。 
(4) 单 击 【链接 检查 器 面板 左 侧 的 【保存 报告 了 按钮 转 ,可 以 把 检查 的 超级 链接 的 情况 
以 文件 形式 保存 起 来 。 单 击 【 关 闭 〗 吕 按钮 , 则 关闭 该 对 话 框 。 


2. 修正 超级 链接 


检查 完 超级 链接 后 ,就 可 以 根据 检查 的 情况 对 错误 或 断 开 的 超级 链接 进行 修正 。Dre- 
amweaver 8 提供 了 强大 的 修正 超级 链接 的 功能 ,具体 操作 步骤 如 下 。 
(1) 在 【站 点 管理 了 窗口 中 选择 【站 点 了 (改变 站 点 范围 的 链接 了 命令 ,如 图 22. 36 所 示 。 
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图 22.36 选择 [改变 站 点 范围 的 链接 ] 命 令 


(2) 弹出 【更 改 整 个 站 点 的 链接 对 话 框 ,如 图 22. 37 所 示 。 该 对 话 框 用 于 设置 把 某 个 文 
件 上 的 全 部 超级 链接 都 转换 成 另 一 个 文件 的 超级 链接 。 

(3) 单 击 上 面 的 文件 夹 图 标 , 浏 览 选 定 要 修正 超级 链接 的 文件 ;然后 单 击 下 面 的 文件 夹 
图 标 ,浏览 选 定 修正 后 的 超级 链接 文件 ,并 单 击 【 确 定 ] 按 钮 。 

(4) 弹出 [更 新 文件 ] 对 话 框 ,如 图 22. 38 所 示 。 单 击 【更 新 3 按钮 .开始 更 新 超级 链接 ; 若 
单 击 【不 更 新 3 按钮 , 则 不 会 进行 更 新 。 
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图 22.37 【更 改 整 个 站 点 的 链接 ] 对 话 框 图 22.38 【更 新 文件 ] 对 话 框 


22.3 测试 本 地 站 点 


精心 设计 的 站 点 都 是 经 得 起 推荐 的 ,因为 它 经 过 了 认真 细致 的 测试 。 测 试 实际 上 就 是 
模拟 用 户 访 问 站 点 的 过 程 ,从 中 发 现 问 题 并 对 设计 加 以 改进 。 

一 般 站 点 都 是 由 一 些 专业 人 员 设 计 的 ,他 们 对 计算 机 和 网 络 有 较 深 的 了 解 ,而 访问 站 点 
的 大 部 分 浏览 者 只 会 使 用 计算 机 和 网 络 , 以 满足 实际 需要 。 所 以 许多 成 功 的 经 验 表 明 , 让 不 
是 很 熟悉 计算 机 的 人 来 参加 站 点 的 测试 工作 ,效果 非常 好 。 这 些 人 会 提出 许多 专业 人 员 没 
有 顾及 到 的 问题 或 一 些 好 的 建议 。 

在 建立 远 端 站 点 并 将 其 声明 为 可 浏览 之 前 ,应 在 本 地 机 上 对 本 地 站 点 进行 完整 的 测试 ， 
使 网 页 在 浏览 器 中 显示 出 预期 的 效果 。 测 试 的 主要 内 容 包括 :检验 网 页 与 目标 浏览 器 的 兼 
容 人 性、 在 浏览 器 中 预览 网 页 .检验 下 载 的 时 间 和 网 页 文件 的 大 小 等 。 


22.3.1 测试 站 点 网 页 与 目标 浏览 器 的 兼容 性 


目前 Internet 上 存在 着 各 种 各 样 的 浏览 器 ,它们 都 有 各 自 的 标准 ,要 让 网 页 在 所 有 的 浏 
览 器 中 都 能 被 正确 浏览 是 不 现实 的 。 通 常 只 需 测试 当前 最 流行 的 两 种 浏览 器 一 一 Internet 
Explorer 和 Netscape Navigator 就 可 以 了 。 事 实 上 .Internet Explorer 和 Netscape Naviga- 
tor 浏览 器 认识 的 只 是 一 种 简单 的 控制 语言 HTML, 它 指示 浏览 器 按 一 定 的 格式 显示 文 
字 和 图 形 .播放 声音 和 动画 等 。 随 着 Internet 的 迅猛 发 展 ,HTML 也 不 断 地 快速 升级 ,加 入 
了 更 多 的 标记 ,增加 了 更 多 的 功能 。 要 支持 HTML 的 新 功能 ,就 必须 升级 浏览 器 。 问 题 在 
于 ,Internet Explorer 和 Netscape Navigator 版 本 众多 ,而 由 于 种 种 原因 很 多 用 户 并 没有 使 
用 最 新 版 本 的 浏览 器 。 因 此 ,设计 出 能 同时 兼顾 各 种 浏览 器 的 网 页 ,就 显得 非常 重要 了 。 

在 Dreamweaver 8 中 检查 网 页 与 目标 浏览 器 兼容 性 的 具体 操作 步骤 如 下 。 

(1) 在 【站 点 管理 了 徐 口 中 双击 打开 一 个 网 页 文件 ,然后 选择 [文件 ] 民 检查 页 了 民 检 查 目 

标 浏 览 器 3 命令 ,如 图 22. 39 所 示 。 
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(2) 在 弹出 的 [目标 浏览 器 检查 了 面板 中 选择 最 低 浏 览 器 ,如 本 例 中 选择 的 是 Microsoft 
Internet Explorer 3.0, 如 图 22. 40 所 示 , 单 击 【确定 3 按钮 返回 。 
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图 22.39 【站 点 管理 ] 窗 口 图 22. 40 【目标 检查 器 ] 面 板 





(3) 然后 单 击 【检查 ] 按 钮 如 ,在 下 拉 菜 单 中 选择 [检查 整个 当前 本 地 站 点 的 目标 浏览 
器 〗 选 项 ,实现 检查 整个 站 点 中 所 有 文件 的 浏览 器 兼容 性 。 也 可 以 对 当前 文件 站 
点 中 选 定 文件 进行 检查 ,另外 ,选择 [编辑 忽略 的 错误 列表 选项 可 以 快速 打开 忽略 
的 错误 列表 文件 进行 编辑 。 
(4) 检查 整个 当前 本 地 站 点 之 后 ,显示 浏览 器 兼容 性 的 检查 结果 如 图 22. 41 所 示 。 单 击 
【保存 报告 ] 按 钮 团 ,可 以 保存 检查 结果 。 
从 图 22. 41 可 以 看 出 :用 Internet Explorer 3.0 浏览 该 站 点 中 的 网 页 时 ,分 别 有 多 个 错 
误 和 警告 ,并 指出 了 错误 所 在 的 文件 和 源 代 码 的 行 号 及 出 错 的 源 代 码 。 可 以 根据 检查 结果 
很 方便 地 找到 源 代码 中 的 错误 ,并 进行 相应 的 修改 。 而 在 Internet Explorer 4. 0 中 则 没有 错 
误 出 现 ,说 明 用 Internet Explorer 4.0 可 以 很 好 地 浏览 该 站 点 中 的 网 页 ,不 会 出 现任 何 错误 。 














图 22.41 浏览 器 兼容 性 的 检查 结果 


在 前 面 的 章节 中 介绍 Dreamweaver 8 的 行为 时 ,介绍 了 一 个 动作 一 一 【检查 浏览 器 】 它 
是 用 来 检验 浏览 者 的 目标 浏览 器 的 。 把 Dreamweaver 8 的 这 两 项 功能 结合 起 来 ,可 以 实现 
让 使 用 不 同 浏览 器 的 浏览 者 都 能 欣赏 到 精美 的 网 页 。 





22. 3.2 预览 网 页 


站 点 设计 和 管理 人 员 在 站 点 发 布 之 前 ,通常 都 要 在 浏览 器 中 预览 网 页 的 效果 ,以 确保 网 
页 浏览 的 效果 与 自己 设想 的 效果 一 致 。 由 于 在 Dreamweaver 8 文档 窗口 中 制作 出 来 的 网 页 
并 不 总 是 与 在 浏览 器 中 浏览 到 的 网 页 具有 相同 的 效果 ,因而 在 浏览 器 中 预览 网 页 是 站 点 测 
试 中 不 可 缺少 的 重要 一 环 。 

在 浏览 器 中 预览 文件 有 两 种 操作 方法 。 

@ 在 Dreamweaver 8 文档 窗口 中 选择 【文件 ] 民 在 浏览 器 中 预览 ]| IExplore 6.0 命令 ， 

或 按 下 F12 键 ,在 主 浏览 器 中 预览 当前 网 页 。 

@ 按 下 Ctrl+F12 组 合 键 ,在 次 级 浏览 器 中 预览 当前 网 页 。 

主 浏览 器 一 般 是 在 安装 Dreamweaver 8 时 ,由 Dreamweaver 8 根据 本 机 上 所 安装 的 浏 
览 器 进行 设置 。 预 览 文档 之 前 无 须 保存 文档 ,所 有 与 浏览 器 相关 的 功能 ,包括 JavaScript、 文 
档 相对 链接 与 绝对 链接 、ActiveX 控件 和 Netscape 插件 等 ,都 由 浏览 器 决定 是 否 可 以 实现 。 

在 预览 网 页 时 ,还 可 以 根据 实际 情况 ,对 浏览 器 的 参数 进行 设置 。 选 择 [ 文 件 3I【 在 浏览 
器 中 预览 〗I【 编 辑 浏览 器 列表 菜单 命令 ,打开 【首先 参数] 对话 框 ,并 显示 [在 浏览 器 中 预览 】 
分 类 选项 ,如 图 22. 42 所 示 。 

该 选项 组 中 各 选项 的 含义 如 下 。 

e ”加 按 钮 :用 于 添加 一 个 新 浏览 器 。 

@ [按钮 :用 于 将 列表 框 中 选 定 的 浏览 器 删除 。 

。 [ 攻 E， ] 按 钮 :用 于 修改 已 经 选 定 的 浏览 器 的 设置 。 

e 【 主 浏览 器 ] 复 选 框 :用 于 将 选 定 的 浏览 器 定义 为 主 浏览 器 ,快捷 键 为 F12。 

@ 【次 浏览 器 ] 复 选 框 :用 于 将 选 定 的 浏览 器 定义 为 次 级 浏览 器 ,组 合 键 为 Ctrl 十 F12。 

安装 Dreamweaver 8 时 ,根据 本 机 上 安装 的 浏览 器 默认 一 种 主 浏览 器 。 如 果 要 添加 一 
种 次 级 浏览 器 ,可 以 在 【首选 参数 ] 对 话 框 中 的 【在 浏览 器 中 预览 ] 选 项 组 中 单 击 加 号 按钮 中 
来 添加 ,其 操作 步骤 如 下 。 
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图 22. 42 【首选 参数 ] 对 话 框 


(1) 单 击 图 22. 42 中 的 加 号 按钮 四 ,打开 [添加 浏览 器 ] 对 话 框 ,如 图 22. 43 所 示 。 
(2) 单 击 [浏览 ] 按 钮 ,查找 选 定 要 作为 次 级 浏览 器 的 应 用 程序 。 
(3) 选中 [次 浏览 器 ] 复 选 框 ,将 添加 的 浏览 器 作为 次 级 浏览 器 ,然后 单 击 【确定 3 按钮 ， 
就 添加 了 一 种 次 级 浏览 器 。 
如 果 要 对 某 种 浏览 器 进行 编辑 ,可 在 [浏览] 列表 框 中 选 定 该 浏览 器 ,并 单 击 【 编 辑 ] 按 
钮 ,就 可 在 打开 的 如 图 22. 44 所 示 的 [编辑 浏览 器 ] 对 话 框 中 对 其 进行 编辑 。 该 对 话 框 与 【 深 
加 浏览 器 3] 对话 框 很 相似 ,可 按 添 加 浏览 器 的 操作 方法 进行 编辑 。 





添加 浏览 器 























22. 43 【添加 浏览 器 ] 对 话 框 图 22. 44 【编辑 浏览 器 ] 对 话 框 


22.3.3 ”检验 文件 大 小 及 下 载 速率 


当前 网 页 文件 大 小 及 下 载 时 间 长 短 也 是 网 页 制作 过 程 中 需要 考虑 的 重要 因素 。 现 在 ， 
各 类 站 点 层出不穷 ,浏览 者 没有 时 间 花 较 长 时 间 等 待 某 个 网 页 的 下 载 。 如 果 网 页 下 载 时 间 
过 长 (超过 15 秒 或 20 秒 ) ,浏览 者 会 失去 耐心 而 不 去 等 待 。 

在 Dreamweaver 8 文档 窗口 的 状态 栏 中 ,有 一 个 方 格 显示 了 当前 页 面 的 大 小 及 预计 的 
下 载 时 间 , 如 图 22. 45 所 示 .“ 缔 吧 ” 网 站 的 首页 ,其 状态 栏 的 一 个 方 格 中 显示 了 “57 Kb/9 秒 ”， 
表明 当前 页 面 的 全 部 内 容 为 57 KB, 预 计 下 载 时 间 为 9s。 其 计算 方法 如 下 :57X8/56(57X8 表 











示 将 网 页 大 小 的 单位 由 “ 字 节 ”转换 为 “位 ”,56 是 Dreamweaver 8 默认 的 下 载 速 度 , 即 56 kb/s)。 

Dreamweaver 8 根据 当前 页 面 中 的 全 部 内 容 计算 文件 的 大 小 ,包括 链接 的 对 象 ,如 图 片 
及 插件 等 。 预 计 的 下 载 时 间 是 Dreamweaver 8 根据 [首选 参数 了 面板 中 的 [状态 栏 ] 选 项 组 中 
选 定 的 链接 速度 计算 出 来 的 。 实 际 上 ,文件 的 下 载 时 间 完 全 依赖 于 计算 机 与 Internet 连接 的 
实际 速度 。 
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图 22.45 状态 栏 中 显示 了 当前 页 面 的 大 小 及 预计 的 下 载 时 间 

设置 下 载 速率 的 操作 步骤 如 下 。 

(1) 在 Dreamweaver 8 文档 窗口 中 选择 [编辑 ]I【 首 选 参数 ] 命 令 。 

(2) 在 弹出 的 [首选 参数 ] 面 板 的 [分 类 ] 列 表 框 中 选择 [状态 栏 ] 选 项 ,出 现 [ 状 态 栏 ] 选 
项 内 容 ,如 图 22. 46 所 示 。 

(3) 从 【连接 速度 I 下 拉 列 表 框 中 选择 用 户 计算 机 连接 Internet 的 速度 ,例如 当前 最 常用 
的 128 kb/s。 

(4) 单 击 【确定 按钮 ,完成 设置 。 
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图 22. 46 【首选 参数 ] 面 板 的 【状态 栏 ] 选 项 组 


设置 完成 后 ,再 回 到 Dreamweaver 8 文档 窗口 中 ,就 可 以 看 到 状态 栏 中 显示 的 下 载 时 间 
变 为 4 秒 了 ,如 图 22. 47 所 示 。 用 户 可 以 根据 实际 情况 调整 连接 速率 ,以 得 到 相应 的 下 载 时 
间 。 根 据 下 载 时 间 的 指示 ,适当 调整 网 页 内 容 ,以 求 获得 较 好 的 下 载 速 度 。 
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图 22.47 设置 计算 机 的 连接 速度 后 的 窗口 
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本 章 内 容 包括 : 

全 精心 设计 网 站 域名 

全 在 各 大 搜索 引擎 上 注册 站 点 
全 在 电子 邮件 签名 中 添加 站 点 地 址 
全 到 BBS 上 公布 站 点 信息 

全 通过 友情 链接 推广 





本 章 要 点 : 


中 国有 名 古 话 光 好 酒 不 怕 埠 子 深 "。 这 话 在 很 多 地 方 都 有 一 定 的 道理 ,但 运用 到 Inter- 
net 上 ee 个 通 。 现在 每 天 都 有 成 千 上 万 个 新 网 站 推出 ,即使 自己 的 主页 再 出 色 . 也 应 该 努 





在 re 必须 确定 所 制作 的 站 点 是 否 独 具 特 色 , 内 容 是 否 充实 ? 如果 只 是 确定 
了 站 点 的 框架 或 只 是 首页 的 内 容 , 就 不 要 急 着 进行 推广 。 等 站 点 已 经 制作 得 较 完 整 之 后 ， 
再 开始 “促销 ”。 

推广 站 点 的 方法 有 许多 种 ,本章 主 要 介绍 一 些 较 好 的 常用 方法 。 











23.1 精心 设计 网 站 域名 


宣传 站 点 最 重要 的 第 一 步 就 是 注册 一 个 好 记 的 域名 。 爱 上 网 或 对 网 络 有 兴趣 的 朋友 可 
能 都 有 这 样 的 切身 体会 : 当 行 走 在 大 街 上 时 ,到 处 都 是 .com 的 广告 ,有 些 看 一 眼 就 能 记 住 ， 
有 些 则 不 然 。 当 然 ,它们 的 广告 效应 也 会 有 差别 。 


23. 1.1 Internet 域名 概述 


从 技术 上 讲 , 域 名 只 是 一 个 Internet 中 用 于 解决 网 站 地 址 问题 的 一 种 方法 。 可 以 说 只 是 
一 个 技术 名 词 。 但 是 ,由 于 Internet 已 经 成 为 了 全 世界 人 的 Internet, 域 名 也 自然 地 成 为 了 
一 个 社会 科学 名 词 。Internet 域名 是 Internet 网 络 上 的 一 个 服务 器 或 一 个 站 点 系统 的 名 字 ， 
在 全 世界 ,没有 重复 的 域名 。 无 论 是 国际 或 国内 域名 ,全 世界 接 入 Internet 网 的 人 都 能 够 准 
确 无 误 地 访问 到 。 从 社会 科学 的 角度 看 ,域名 已 成 为 了 Internet 文化 的 组 成 部 分 。 从 商界 
看 ,域名 已 被 誉 为 “企业 的 网 上 商标 ”。 没 有 一 家 企业 不 重视 自己 产品 的 标识 一 一 商标 ,而 域 
名 的 重要 性 及 其 价值 ,也 已 经 被 全 世界 的 企业 所 重视 。 


23. 1.2 ”Internet 域名 命名 规范 


域名 名 称 一 般 由 26 个 英文 字母 .10 个 阿拉 伯 数 字 以 及 下 划 线 ” ?组 成 。 

国内 域名 的 注册 ,有 很 多 不 同 于 国际 域名 注册 的 地 方 ,在 对 域名 的 命名 上 有 比较 多 的 限 
制 , 包 括 : 

@ 不 得 使 用 CHINA、CHINESE、CN、NATIONAL 等 作为 域名 的 一 部 分 。 

@ 不 得 使 用 公众 知晓 的 其 他 国家 或 者 地 区 名 称 、 外 国 地 名 、 国 际 组 织 名 称 。 

@ 未 经 各 级 地 方 政府 批准 ,不 得 使 用 县 级 以 上 ( 含 县 级 ) 行 政 区 划 名 称 的 全 称 或 者 

缩写 。 

e 不 得 使 用 行业 名 称 或 者 商品 通用 名 称 。 

@ 不 得 使 用 他 人 已 在 中 国 注册 过 的 企业 名 称 或 商标 名 称 。 

@ 不 得 使 用 对 国家 、 社 会 或 者 公共 利益 有 损害 的 名 称 。 

对 于 公司 站 点 来 说 ,把 公司 名 称 注 册 为 域名 是 一 个 较 好 的 选择 。 这 样 让 用 户 在 记 住 公 
司 名 称 的 同时 ,也 记 住 了 公司 站 点 的 域名 。 这 是 业界 一 条 不 成 文 的 做 法 ,也 是 非常 行 之 有 效 
的 方法 。 相 信 很 多 爱 上 网 的 朋友 都 有 过 这 样 的 经 历 :如 果 要 查找 某 公 司 的 产品 信息 ,但 是 只 
知道 该 公司 名 称 , 而 不 知道 公司 域名 ,这 时 往往 就 在 浏览 器 地 址 栏 中 输入 "www. 公司 名 称 
(英文 ). com”, 然 后 按 Enter 键 , 基 本 上 都 能 满意 而 归 。 如 要 查找 有 关 Dreamweaver MX 的 
信息 ,知道 它 是 Macromedia 公司 发 行 的 软件 后 ,就 可 以 在 浏览 器 的 地 址 栏 中 输入 
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“www. macromedia. com”, 并 按 Enter 键 , 可 打开 Macromedia 公司 的 站 点 ,执行 相应 的 搜索 ， 
就 可 以 查找 到 想 要 的 信息 。 





国内 域名 由 中 科 院 域名 管理 中 心 负责 ,国际 域名 由 设 在 美国 的 Internet 信息 管理 中 心 
(InterNIC) 和 它 设 在 世界 各 地 的 分 支 机 构 负 责 批 准 域名 的 申请 。 


23.2 在 各 大 搜索 引擎 上 注册 站 点 


一 般 浏览 者 都 有 个 习惯 ,如 果 要 查找 特定 的 信息 ,就 会 到 各 大 搜索 引擎 上 查找 相应 的 站 
点 ,然后 再 根据 提示 单 击 超级 链接 进行 浏览 ,直至 查找 到 自己 想 要 的 内 容 。 因 此 可 以 到 各 大 
搜索 引擎 上 注册 自己 的 站 点 ,从 而 增加 被 搜索 的 机 会 。 


23.2.1 搜索 引擎 分 类 


注册 搜索 引擎 是 诸多 网 站 推广 方式 中 发 展 最 成 熟 、 最 重要 的 方式 ,在 访问 率 比较 高 的 几 
个 搜索 引擎 中 ,能 够 自动 搜索 网 页 信息 的 搜索 引擎 有 Google、 百 度 、Altavista、 Excite、 Hot- 
bot、Lycos、Infoseek、Webcrawler, 而 像 Yahoo ,搜狐 的 搜狗 等 搜索 引擎 则 采用 手工 方式 收录 
网 址 ,以 保证 收录 网 站 的 质量 。 

Yahoo 搜狗 这 类 网 站 的 搜索 结果 的 信息 相关 性 比 其 他 自动 搜索 的 引擎 站 点 更 强 , 而 自 
动 搜索 类 站 点 的 搜索 结果 则 有 着 不 可 比拟 的 范围 广泛 .信息 量 巨大 的 优势 ,所 以 两 种 类 型 的 
搜索 引擎 各 有 所 长 ,成 为 人 们 寻找 信息 的 得 力 助 手 。 

目前 ,国内 各 大 知名 网 站 几乎 都 提供 了 搜索 引擎 服务 ,下 面 列 出 国内 外 最 有 影响 的 几 个 
搜索 引擎 。 

百度 :http://www. baidu. com/ 

搜狗 :http://www. sogou. com/ 

新 浪 :http://cha. sina. com. cn/ 

网 易 ;http://www. 163. com/ 

中 国 搜索 :http://flash. zhongsou. com/ 

Google:http://www. google. com/ 





Yahoo:http://www. yahoo. com/ 
Excite:http://www. excite. com/ 
Altavista: http://www. altavista. com/ 
Hotbot:http://www. hotbot. com/ 


Lycos:http://www. lycos. com/ 
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23. 2.2 搜索 引擎 注册 方法 


目前 各 大 搜索 引擎 注册 方法 基本 相同 ,但 却 提供 有 不 同 的 特色 服务 ,如 百度 的 竞价 排名 
服务 ,百度 搜索 引擎 竞价 排名 服务 可 将 你 的 网 站 排 在 百度 搜索 结果 前 列 。 当 然 前 提 条 件 是 
缴纳 一 定 的 费用 ,这 对 于 广大 初学 者 来 说 是 不 必要 的 。 下 面 介 绍 在 各 大 搜索 引擎 中 免费 注 
册 的 方法 及 注意 事项 。 


1. 在 Google 中 注册 网 站 


普通 的 Google 搜索 引擎 注册 (登录 ) 方 法 是 通过 Google 登录 页 面向 Google 搜索 引擎 提 
交 即 可 ,如 图 23. 1 所 示 。 登 录 地 址 :http://www. google. com/intl/zh-CN/add_url. html 。 
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图 23.1 在 Google 中 注册 网 站 


一 般 情况 下 ,只 要 提交 了 一 个 页 面 ,Google 会 自动 搜索 到 站 点 其 他 的 页 面 ,但 是 如 果 页 
面 链 接 是 图 片 或 者 Flash 按钮 等 ,最 好 还 要 将 主要 页 面 都 向 Google 提交 一 下 。 即 使 是 文字 
链接 也 可 以 多 次 向 Google 提交 。 

通过 如 图 23. 1 所 示 的 方法 登录 Google 一 般 没有 那么 快 被 搜索 引擎 收录 进 排 名 , 短 则 三 
五 天 ,长 了 就 难说 了 。 如 何 最 快 地 让 Google 收录 自己 注册 的 网 站 呢 ? 最 简单 的 办 法 就 是 在 
流量 非常 大 ,Google 天 天 光顾 的 网 站 或 者 网 页 上 做 超 连 接 , 其 中 文字 链接 效果 最 好 。 这 一 招 
虽然 比 普通 的 登录 办 法 麻烦 些 ,但 是 效果 是 非常 明显 的 。 这 种 链接 越 多 越 好 ,不 光 可 以 让 自 
己 的 站 点 快速 地 被 Google 收录 ,而 且 还 可 以 快速 地 在 Google 中 提升 网 站 的 的 排名 。 


2. 在 百度 搜索 引擎 中 注册 网 站 


普通 的 百度 搜索 引擎 注册 (登录 ) 办 法 就 是 通过 百度 登录 页 面向 百度 搜索 引擎 提交 即 
可 ,如 图 23. 2 所 示 。 登 录 地 址 :http://www. baidu. com/search/url_submit. html。 
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图 23.2 在 百度 搜索 引擎 中 注册 网 站 


百度 是 中 文 搜索 引擎 , 主要 收录 中 文 网 站 ,外 文 网 站 一 般 不 能 登录 ,只 有 少数 在 中 文 用 
户 中 比较 知名 的 外 文 网 站 才能 登录 。 

百度 会 经 常 自动 检 测 注册 网 站 的 连接 状况 ,如 果 百 度 检测 时 网 站 遇 到 无 法 连接 的 情况 ， 
就 可 能 从 百度 中 被 删除 。 

百度 会 自动 阅读 被 百度 找到 的 每 一 个 网 页 ,并 且 会 顺 着 网 页 上 的 每 一 个 链接 找到 下 一 
个 网 页 。 因 此 ,如 果 被 百度 找到 的 某 个 网 页 上 有 和 链接 指向 你 的 网 站 ,那么 你 的 网 站 也 会 被 百 
度 找到 。 


3. 在 其 他 搜索 引擎 注册 网 站 


搜狐 :http://add. sohu. com/ 

网 易 :http://seek. 163. com/cgi-bin/search/add_url. cgi 

新 浪 :http://bizsite. sina. com. cn/newbizsite/docc/index-2jifu-09. htm 
雅虎 中 国 :http://cn. Yahoo. com/ docs/info/suggest. html 





23.2.3 ”搜索 引擎 注册 技巧 


注册 搜索 引擎 时 ,一般 需要 准备 如 下 材料 ,当然 有 些 搜索 引擎 仅 需 要 网 址 即 可 : 
联系 人 姓名 ; 
E-mail 地 址 ; @ 
站 点 正式 名 称 ; 
主页 网 址 ; 
中 文 关键 词 ; 











新 编 网 页 制作 入 门 与 提高 


英文 关键 词 ; 
站 点 类 别 等 。 


关键 词 (Keywords) 就 是 我 们 在 查找 信息 时 输入 的 词语 ,也 是 搜索 引擎 对 站 点 进行 搜索 
的 依据 ,所 以 了 解 关键 词 的 知识 对 于 在 搜索 引擎 注册 时 至 关 重 要 。 

有 几 个 搜索 引擎 (如 Altavista、Hotbot、Infoseek) 使 用 HTML 源 代码 中 的 二 meta 二 标签 
作为 识别 标志 ,所 以 要 正确 使 用 这 些 信息 ,meta 里 的 关键 词 和 描述 非常 重要 。 

确定 关键 词 可 以 借鉴 其 他 成 功 的 网 站 , 先 选 几 个 主要 的 搜索 引擎 (例如 :Altavista、Ly- 
cos、Excite 等 ) ,搜索 你 选 定 的 自己 站 点 的 关键 词 。 通 常会 得 到 一 个 很 长 的 列表 ,打开 排名 前 
十 位 的 站 点 ,然后 查看 源 文件 中 的 meta 标签 ,检查 它们 的 关键 词 ,从 中 查看 你 没有 想到 的 一 
些 词 ,最 后 归纳 出 自己 的 关键 词 。 

一 般 来 说 ,选择 的 关键 词 应 该 在 3 个 以 上 ,因为 浏览 者 利用 搜索 引擎 查询 信息 时 ,输入 的 
关键 词 往往 很 明确 , 越 多 的 关键 词 将 会 带 来 更 高 的 命中 率 。 也 可 以 多 选 几 个 词 重复 搜索 过 
程 ,这 样 可 以 得 到 比较 全 面 的 参考 资料 。 

输入 关键 词 要 注意 下 面 一 些 问 题 : 


不 要 使 用 互联 网 上 常用 的 词汇 ,如 Homepage`\WWW、Web、Webpage 等 。 

不 必 考 虑 语法 和 介词 ,选择 关键 词 不 是 写 文章 。 

为 商业 站 点 注册 不 要 加 入 带 有 感情 色彩 的 关键 词 。 

专业 性 强 的 站 点 ,尽量 不 要 用 非 专业 用 词 做 关键 词 。 站 点 的 专业 性 较 强 ,所 针对 的 
也 大 多 是 业内 人 士 ,将 行业 常用 词 或 常用 词 缩写 作为 关键 词 提交 都 是 提高 命中 率 的 
好 办 法 。 

要 注意 向 国外 习惯 用 语 靠 扰 。 将 汉语 生硬 地 翻译 成 英文 ,这 不 符合 他 们 的 语言 
惯 ,这 种 “关键 词 "提交 上 去 不 会 有 什么 作用 。 

不 要 提交 框架 页 Frame 的 页 面 。 大 部 分 搜索 引擎 不 识别 Frame, 所 以 一 定 要 提交 有 
内 容 的 Main 页 面 。 

提交 内 容 最 丰富 的 URL, 不 要 只 提交 根 网 址 。 因 为 很 多 公司 习惯 将 主页 做 成 美观 的 
图 形 , 像 图 书 的 封面 ,但 是 搜索 引擎 对 图 没有 特殊 的 好 感 ,自动 搜索 的 软件 只 喜欢 收 
录 文 字 内 容 详 细 、 贴 切 的 URL。 

增 大 词汇 量 , 列 出 尽 可 能 相关 的 关键 词 。 需 准备 50 一 100 个 关键 词 ,增加 命中 的 概 
率 。 要 想 在 搜索 引擎 中 取得 好 名 次 ,页面 中 至 少 要 包含 100 个 词汇 。 因 此 ,在 向 搜 
索引 擎 提交 页 面 时 ,可 制作 或 修改 你 的 某 些 页 面 , 使 其 至 少 包含 100 个 词汇 。 在 提 
交 页 面 的 可 见 范围 内 ,考虑 至 少 要 包含 150 一 300 个 词汇 。 

重复 重要 关键 词 ,使 其 占 到 页 面 所 有 词汇 的 1 外 一 2 中 。 大 多 数 在 搜索 引擎 排名 很 好 
的 页 面 ,其 关键 词 都 占 到 1%。 这 样 的 网 站 在 搜索 引擎 上 取得 好 名 次 的 几率 要 高 
很 多 。 

还 可 以 多 申请 几 个 域名 ,然后 分 别 建立 主页 来 强调 重要 的 关键 词 ,搜索 引擎 为 网 站 
带 来 的 流量 与 申请 域名 的 费用 相 比 还 是 值得 的 。 





@ 对 于 手工 录入 的 搜索 引擎 ,首先 要 注意 遵守 搜索 引擎 提供 的 注册 要 求 。 选 择 最 重要 
的 20 个 关键 词 ,注意 不 要 与 Title 重复 。 

e@ 通常 选择 重要 的 几 个 搜索 引擎 注册 已 经 足够 ,当然 还 要 注意 网 站 所 属 的 行业 中 是 否 
有 特殊 的 搜索 引擎 , 毕 竞 行业 内 的 搜索 引擎 目标 用 户 清晰 、 效 率 更 高 。 


23.3 在 电子 邮件 签名 中 添加 站 点 地 址 


在 当今 信息 化 时 代 , 随 着 网 络 的 普及 ,电子 邮件 因 其 便捷 、 迅 速 和 廉价 的 优点 , 正 被 越 来 
越 多 的 人 用 作 主 要 的 通信 方式 ,成 为 现代 人 生活 中 不 可 缺少 的 一 种 工具 。 因 此 将 自己 制作 
的 站 点 通过 E-mail 告知 亲朋 好 友 , 也 是 一 种 非常 好 的 宣传 手段 。 一 般 情况 下 , 当 好 友 看 到 你 
留 下 的 网 址 ,肯定 会 去 浏览 一 番 。 如 果 你 的 站 点 制作 得 确实 不 错 ,他 们 就 会 把 你 的 站 点 转发 
出 去 。 经 过 E-mail 的 不 断 转发 之 后 ,站 点 的 知名 度 就 会 提高 。 但 要 注意 ,使 用 E-mail* 促 销 ” 
一 定 要 注意 礼节 ,不 要 乱 发 邮件 , 弄 不 好 会 适得其反 。 

下 面 以 最 常用 的 收发 电子 邮件 的 软件 Outlook 为 例 , 介 绍 如 何在 电子 邮件 签名 并 添加 网 
址 ,具体 操作 步骤 如 下 。 

(1) 启动 Outlook ,选择 【工具 ] 民 选项] 命令 。 

(2) 在 弹出 的 [选项 ] 对 话 框 中 单 击 【签名 标签 ,切换 到 [签名 】 选 项 卡 ,如 图 23. 3 所 示 。 

(3) 单 击 [新 建 ] 按 钮 ,在 [编辑 签名 】 选 项 的 [文本 ] 编 辑 区 域 中 输入 文字 “欢迎 访问 : 

http://www. zhuyinhong. com. cn”, 如 图 23.4 所 示 。 
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图 23.3 选择 [签名 ] 标 签 图 23.4 创建 签名 
(4) 完成 编辑 签名 后 , 单 击 【 重 命名 按钮 ,在 【签名 列表 框 中 重 命名 自己 的 签名 。 然 后 
单 击 【高 级 按钮 ,在 打开 的 【高 级 签名 设置 对话 框 中 设置 要 使 用 该 签名 的 账户 ,如 
图 23. 5 所 示 。 











(5) 创建 了 签名 之 后 ,在 【选项 ] 对 话 框 中 单 击 【 应 用 按钮 ,关闭 【选项 ] 按 钮 即 可 ， 
如 图 23. 6 所 示 。 





和 

















图 23.5 设置 签名 高 级 设置 图 23.6 设置 给 所 有 邮件 签名 


(6) 在 Outlook 编辑 窗口 中 选择 [文件 〗I[ 新 建 3I【 邮 件 ] 命 令 , 在 弹出 的 [未 命名 的 邮件 】 
窗口 的 正文 区 中 自动 添加 了 在 [签名 】 选 项 卡 中 编辑 的 文本 内 容 ,如 图 23.7 所 示 。 


文件 QD 名 儿 EE) 查看 W 牟 入 0) 格式 Q) I 具 T ” 诗 | 











图 23.7 自动 增加 签名 


这 样 ,每 次 给 朋友 发 送 邮 件 时 ,就 会 自动 带 上 添加 的 站 点 地 址 。 采 用 这 种 方式 做 宣传 ， 
效果 肯定 很 好 。 


23.4 到 BBS 上 公布 站 点 信息 


上 BBS 聊天 、 发 布 或 查看 信息 ,已 成 为 当今 网 虫 们 网 上 生活 的 一 部 分 。 同 样 如 果 自 己 的 
站 点 确实 能 够 提供 有 用 的 信息 ,也 可 以 到 与 自己 站 点 主题 相关 的 论坛 上 发 布 “促销 ”广告 ,这 
样 浏览 者 会 比较 容易 接受 。 并 且 如 果 碰 到 高 手指 点 ,也 可 以 立即 进行 修正 ,经 过 不 断 地 去 粗 
取 精 ,相信 自己 的 站 点 会 更 完美 。 如 图 23. 8 所 示 的 网 页 即 为 一 个 网 页 制作 初级 用 户 论坛 , 积 
极 参 与 其 中 ,可 以 大 大 提高 自己 的 网 页 制作 技术 水 平 。 











图 23.8 在 BBS 上 发 布 信息 


采用 这 种 宣传 方式 时 , 千 万 不 要 到 不 相关 的 BBS 发 布 信息 。 如 果 站 点 制作 还 不 完善 ,等 
把 它 制作 好 了 再 发 布 也 不 迟 。 否 则 ,不 但 吸引 不 了 别人 的 兴趣 ,而 且 弄 不 好 还 会 激 起 民愤 ， 
得 不 偿 失 。 

当然 采用 这 种 方式 公布 信息 一 定 要 选择 一 个 聊天 者 较 多 的 BBS, 这 样 可 以 得 到 很 多 有 益 
的 意见 。 


23.5 通过 友情 链接 推广 
用 户 可 以 在 Internet 上 查找 与 自己 站 点 主题 类 似 的 站 点 ,通过 友好 协商 后 可 以 与 它们 链 


接 起 来 。 随 着 链接 站 点 的 增多 ,形成 类 似 * 蜂 蛛网 " 般 的 链接 后 ,可 以 吸引 大 量 的 浏览 者 。 彼 
此 互相 宣传 .效果 非常 好 。 如 图 23. 9 所 示 左 侧 的 小 图 标 即 为 与 相关 站 点 建立 的 彼此 链接 。 

















图 23.9 建立 友情 链接 
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由 于 这 种 合作 方式 一 般 是 通过 友好 协商 建立 的 ,所 以 合作 过 程 中 可 能 会 出 现 很 多 问题 。 
这 就 要 求 在 寻找 链接 伙伴 时 ,本 着 诚信 、 公 平 的 原则 建立 合作 关系 。 另 外 ,不 要 单纯 为 了 增 
加 彼此 链接 的 数量 ,而 忽视 了 其 他 站 点 的 质量 ,“ 宁 缺 星 滥 ” 才 是 正确 的 选择 。 

除了 上 面 介绍 的 几 点 外 ,还 有 很 多 种 宣传 方式 ,如 做 广告 有 奖 宣传 .赠送 小 礼物 等 。 不 
过 这 些 都 属于 商业 型 站 点 的 宣传 范围 ,对 于 个 人 站 点 ,还 是 以 不 花 钱 搞 宣传 为 好 。 

当然 ,站 点 吸引 人 的 基础 还 在 于 它 良 好 的 规划 结构 .富有 美感 的 页 面 设 计 及 生动 丰富 的 
内 容 。 如 果 失 去 了 这 些 ,无 论 怎么 宣传 也 起 不 了 多 大 作用 。 有 了 好 的 基础 之 后 ,就 有 可 能 从 
个 人 站 点 走向 商业 型 站 点 。 现 在 ,很 多 商业 型 站 点 都 是 这 样 发 展 而 成 的 。Internet 给 用 户 提 
供 了 很 大 的 发 展 空间 ,喜欢 做 主页 的 朋友 一 定 要 努力 把 握 好 机 会 。 


